e359e0f47d
Recently the wizard has started rendering such that its vertical height matches the height of its body – and therefore only occupies some fraction of the page’s vertical space for many steps. The desired behavior is for its footer to be fixed at the bottom of the viewport. Specifying the page section type prop as ‘wizard’ resolves the issue. This is the pattern used in the Patternfly documentation for in-page wizards. See here: https://www.patternfly.org/components/wizard/react-demos#in-page Using CSS to adjust Patternfly component rendering is an antipattern. More custom CSS means more time spent troubleshooting rendering issues. Custom CSS related to rendering of the wizard has been removed. There is still an annoying issue. The body of the wizard is not scrollable and will overflow. This is counter to the Patternfly examples. There doesn’t seem to be any CSS in Image Builder that would cause this to occur. Perhaps the problem is somehow inherited from Insights Chrome? In any case, this will require further investigation.
76 lines
1.5 KiB
SCSS
76 lines
1.5 KiB
SCSS
.pf-v5-c-wizard__nav-list {
|
|
padding-right: 0px;
|
|
}
|
|
|
|
|
|
.pf-c-popover[data-popper-reference-hidden="true"] {
|
|
font-weight: initial;
|
|
visibility: initial;
|
|
pointer-events: initial;
|
|
}
|
|
|
|
.pf-c-form {
|
|
--pf-c-form--GridGap: var(--pf-v5-global--spacer--md);
|
|
}
|
|
|
|
.pf-c-form__group-label {
|
|
--pf-c-form__group-label--PaddingBottom: var(--pf-v5-global--spacer--xs);
|
|
}
|
|
|
|
.tiles {
|
|
display: flex;
|
|
}
|
|
|
|
.tile {
|
|
flex: 1 0 0px;
|
|
max-width: 250px;
|
|
}
|
|
|
|
.pf-c-tile:focus {
|
|
--pf-c-tile__title--Color: var(--pf-c-tile__title--Color);
|
|
--pf-c-tile__icon--Color: var(---pf-v5-global--Color--100);
|
|
--pf-c-tile--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
--pf-c-tile--before--BorderColor: var(--pf-v5-global--BorderColor--100);
|
|
}
|
|
|
|
.pf-c-tile.pf-m-selected:focus {
|
|
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
|
|
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
|
|
}
|
|
|
|
.provider-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.pf-v5-u-min-width {
|
|
--pf-v5-u-min-width--MinWidth: 18ch;
|
|
}
|
|
|
|
.pf-v5-u-max-width {
|
|
--pf-v5-u-max-width--MaxWidth: 26rem;
|
|
}
|
|
|
|
ul.pf-m-plain {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.not-available {
|
|
color: #6a6e73;
|
|
}
|
|
|
|
.panel-border {
|
|
--pf-v5-c-panel--before--BorderColor: #BEE1F4;
|
|
}
|
|
|
|
// Targets the alert within the Reviewsteps > content dropdown
|
|
// Removes excess top margin padding
|
|
div.pf-v5-c-alert.pf-m-inline.pf-m-plain.pf-m-warning {
|
|
margin-top: 18px;
|
|
|
|
h4 {
|
|
margin-block-start: 0;
|
|
}
|
|
}
|