patternfly / patternfly/patternfly-react

Bug - Page/Drawer - PageSection in DrawerBody has an incorrect height

Offen
#8,541 4 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Pinned
Vorherrschende Sprache
TypeScript
Sterne
862
Forks
392
Ø Merge
4 T. 8 Std.
Gemergte PRs (30 T.)
9

Beschreibung

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?

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der CodeSandbox-Reproduktion in index.tsx und vergleiche das Layout-Verhalten von Page, PageSection, Drawer und DrawerContentBody. Überprüfe das Ergebnis sowohl mit wenigen als auch mit vielen Karten. Als erledigt gilt die Aufgabe, wenn der Abschnitt die verfügbare Seitenhöhe ausfüllt, ohne unerwünschtes Scrollen zu erzeugen, und gleichzeitig scrollbar bleibt, wenn der Karteninhalt die verfügbare Höhe überschreitet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.