Page - Allow main grid without sidebar and masthead #7357
Description
Is this a new component or an extension of an existing one?
<Page>
Describe the feature
Currently there is no way to configure Page component to not have the grid whitespace of a missing sidebar when you are missing both the sidebar and header grid area but only have a main layout. One use-case for this is when you are putting a page main content inside an iframe. As you still want the correct layout. If we were to just use PageSection or similar we would not get the correct CSS applied and would have to introduce our own CSS
Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
Include screenshots or links to Marvel or other mockups.
With the iframe system we have it looks like this
Using the CSS override
@media (min-width: 75rem) {
.pf-v6-c-page.no-masthead-sidebar { /* custom class to scope this style to a specific page component instance */
--pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
}
}we get
Any other information?
Current CSS introducing the problem
patternfly/src/patternfly/components/Page/page.scss
Lines 340 to 344 in 917bda0
Metadata
Metadata
Assignees
Labels
Type
Projects
Status