Full height drawer in page section

Support
#1

I guess I’m doing a newbie mistake.

I have a Page component containing a PageSection, that contains a Drawer (within the drawer is a table and in the panel is some detail information. I’m not sure, what I’m doing wrong, but I could not find a way with the default classes to make the Drawer component fill the page section. Also putting a Stack (with a Stack item having isFilled set, did not fill the the whole page section), instead of the Drawer. The drawer/stack seem to have height:100% set, but it is ignored, I guess because the PageSection has no height set explicitly. Setting pf-m-fill class on the Drawer did not work

What would be the correct way? I guess I’ve missed a default pf css class. The drawer has only the height of the DrawerContentBody, not of the whole page section.
Only setting className=“pf-l-flex pf-m-column” on the page section and setting my custom style worked. Is that the correct way ?

The only quick&dirty way I found was doing this (abbreviated):
const styleFill:CSSProperties={flexGrow:1}

           <PageSection isFilled={true} className="pf-l-flex pf-m-column">
               <Drawer isExpanded={isExpanded} style={styleFill}>
                   <DrawerContent panelContent={tmpPanelContent} >
                        <DrawerContentBody >
                            <Table
                                aria-label="some data"
                                variant='compact'
                                borders={true}
                                cells={columns}
                                rows={rows}
                            >
                                <TableHeader />
                                <TableBody />
                            </Table>
                        </DrawerContentBody>
                    </DrawerContent>
               </Drawer>
           </PageSection>

Thanks in advance for any information

#2

Hey @jowenn,

I’ve written a short demo that wraps a Drawer in a PageSection. Perhaps the padding={{ default: 'noPadding' }} is what you were missing?

Does this fix your issue?

  • Zack
1 Like