英文:
How to resize content of Ionic grid to a fixed height without scroll
问题
我正在尝试使用Ionic Framework创建一个列和行的网格。我的目标是IonGrid占用剩余的可用高度，同时显示整个内容，而不必滚动以显示视窗外的隐藏内容。因此，内容（列和行）必须调整大小以一次性显示所有内容。这将导致所有内容都非常小，但至少可以在视图中看到。
我正在使用React v18.2.0和Ionic/React v7.0.0。
以下是我的当前组件的示例：
<IonContent>
<IonGrid>
<IonRow>
<IonCol size="4">
<IonRow>
... 内容
</IonRow>
<IonRow>
... 内容
</IonRow>
</IonCol>
<IonCol size="4">
<IonRow>
... 内容
</IonRow>
<IonRow>
... 内容
</IonRow>
</IonCol>
<IonCol size="4">
<IonRow>
... 内容
</IonRow>
<IonRow>
... 内容
</IonRow>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
... 内容
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
我尝试在IonContent和IonGrid上设置maxHeight、height和overflow，但没有成功。我知道IonGrid的scrollY属性，将其设置为false可以防止滚动，但这样会导致IonGrid内的其他内容被隐藏，而无法看到。
是否可以自定义IonGrid以解决这个问题，同时拥有响应式系统，还是最好使用常规CSS来处理？
英文:
I'm trying to create a grid of columns and rows using the Ionic Framework.
My goal is IonGrid taking the remaining available height while displaying the entire content without having to scroll to reveal hidden content outside the viewport. The content (columns & rows) must therefore resize in order to show everything at once. This must result in everything being very small, but at least it is there for the viewing.
I'm using React v18.2.0 and Ionic/React v7.0.0
and here is a terrible paint job illustrating my issue. The last row is cut off with the green part being outside the viewport requiring the user to scroll in order to reveal it. The entire grid must therefore fit on the available space, but resize to do so.
Here is an example of my current component:
<IonContent>
<IonGrid>
<IonRow>
<IonCol size="4">
<IonRow>
... content
</IonRow>
<IonRow>
... content
</IonRow>
</IonCol>
<IonCol size="4">
<IonRow>
... content
</IonRow>
<IonRow>
... content
</IonRow>
</IonCol>
<IonCol size="4">
<IonRow>
... content
</IonRow>
<IonRow>
... content
</IonRow>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
... content
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
I tried experimenting with setting the maxHeight, height, overflow on both the IonContent and IonGrid without any luck. I'm aware of the scrollY prop of IonGrid, and setting it to false does prevent any scrolling from being possible. However, then the rest of the content within the IonGrid is hidden further down the page without the chance of seeing it.
Is it possible to customize the IonGrid to solve this while also having a responsive system or am I best off doing this with regular CSS?
答案1
得分: 1
如果您希望整个网格适应可用空间，但也能调整大小，您可以在ion-grid上设置display: grid和height CSS属性。
我已经创建了一个示例，符合您的需求。请查看链接：https://stackblitz.com/edit/angular-64dqr3?file=src/main.tsx
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ion-grid {
background-color: red;
height: 100vh;
overflow: auto;
display: grid;
}
ion-col {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
}
英文:
if you want the entire grid fit on the available space, but also resize you can set display: grid and height css property on ion-grid.
I have created a sample of what you need. Check the link: https://stackblitz.com/edit/angular-64dqr3?file=src/main.tsx
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ion-grid {
background-color: red;
height: 100vh;
overflow: auto;
display: grid;
}
ion-col {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论