You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
aljesusg
changed the title
Bug - Grid - align property is not corresponding with pf5
Bug - Label - children inside are not align property with pf5
Aug 5, 2023
Hey @aljesusg taking a stab at it from the markup I see generated in dev tools... it looks like the problem may be that the additional icons are wrapped in <div> elements, which are block elements, so they're putting their contents on a new line. I wonder if either removing the divs and including the icons directly, or changing the divs to inline <span> elements would address that? Here is a codesandbox demonstrating those 2 fixes - https://codesandbox.io/s/tender-sutherland-ncqmhr?file=/index.html
If that resolves it, it's because previously all of your content was a child of pf-v5-c-label__content, which was a flex layout, and by default a flex layout will put all of its children side-by-side in a row, whether the elements were inline or block. Now all of your content is a child of pf-v5-c-label__text, which is just a regular block element, so any children of that element will lay out normally (block elements will be put on a new line, for example).
If that doesn't resolve it, can you share a codesandbox that replicates your markup and reproduces the problem you're seeing?
Describe the problem
Items are not aligned horizontally
How do you reproduce the problem?
Grid items with align , it seems that style pf-v5-c-label__content > pf-v5-c-label__text is not working
Is this issue blocking you?
Fix adding class pf-v5-c-label__content to the second span
Screenshots
Before
## Now
What is your environment?
"@patternfly/patternfly": "5.0.0",
"@patternfly/react-charts": "7.0.0",
"@patternfly/react-core": "5.0.0",
"@patternfly/react-table": "5.0.0",
"@patternfly/react-tokens": "5.0.0",
"@patternfly/react-topology": "5.0.0",
What is your product and what release date are you targeting?
Any other information?
The text was updated successfully, but these errors were encountered: