patternfly / patternfly/patternfly-react
Bug - Page/Drawer - PageSection in DrawerBody has an incorrect height
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 862
- 派生
- 392
- 平均合并
- 4 天 8 小时
- 30 天内合并 PR
- 9
描述
Describe the problem
I am trying to build a page, which has several clickable cards on it, and when you click on the card, there will be a drawer panel shown on the right side. However, when implementing this, I find some issues with the page height. See the example below for the details.
How do you reproduce the problem?
I created a code sandbox example here: https://codesandbox.io/s/vigorous-bohr-ydpp8d?file=/index.tsx
I try to put a drawer in a Page component and set the PageSection in the DrawerContentBody, however, the DrawerContentBody is not flex display, which will make the grey background page section not take up the entire page height. So I use the Flex layout provided by PatternFly. However, another bug comes, the page section will take up more height than it should take, which causes the page to scrollable.
Expected behavior
The page section will take up the full page height when there is no enough card, and will be scrollable when there are a lot of cards.
Is this issue blocking you?
I can create some custom styles to avoid this. However, I still want to use only PF to build the application, avoid making any custom styles.
Screenshots
See the example.
What is your environment?
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
What is your product and what release date are you targeting?
ODH/RHODS
Any other information?
I am not sure whether it's permitted to put PageSection into DrawerContentBody by design. If not, what's the workable way to implement this feature? Is there any component that can provide me with a grey background on which I can put a lot of cards?
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 index.tsx 中的 CodeSandbox reproduction 开始,比较 Page、PageSection、Drawer 和 DrawerContentBody 的布局行为。分别使用少量和大量卡片验证结果。完成标准是:section 填满页面可用高度,不产生不必要的滚动;当卡片内容超出可用高度时,仍可滚动。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100