patternfly / patternfly/patternfly-react
Bug - Page/Drawer - PageSection in DrawerBody has an incorrect height
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 862
- Fork
- 392
- Merge medio
- 4g 8h
- PR unite (30g)
- 9
Descrizione
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?
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con la riproduzione in CodeSandbox in index.tsx e confronta il comportamento del layout di Page, PageSection, Drawer e DrawerContentBody. Verifica il risultato sia con poche schede sia con molte schede. Il lavoro è completato quando la sezione riempie l’altezza disponibile della pagina senza creare uno scorrimento indesiderato, rimanendo al contempo scorrevole quando il contenuto delle schede supera l’altezza disponibile.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100