Bug - v5 alpha testing - Select options appear ouside wizard modal

[dlabrecq]

While testing the Cost management UI, we encountered the following issue with the Select options appearing outside the wizard modal.

Before

After

Code

[tlabaj]

@dlabrecq was this working with the last round of alpha testing?

Also, is it possible to screenshot the html structure and the css of the element.

[tlabaj]

@mcoker could this be a css issue?

[gitdallas]

@tlabaj -first noticed this in april https://docs.google.com/document/d/1bQmzy4nRdNZqvFRha0cOr0hiB8JRYZfnYpz3nz3Z_SI/edit#heading=h.rqz5lgwh6tbq

[gitdallas]

@tlabaj html:

also some styling on the c-select

in dev-tools - adding .pf-v5-c-select:nth-child(2) { width: auto; } fixes the issue

[mcoker]

@tlabaj it looks like it is a CSS issue that isn't working well with the popper styles we updated recently to use min-width instead of width.

We apply the CSS width: 100% to the select component in core, and popper is applying min-width: {{width of select toggle}} to the select when it wraps the menu, and width: 100% is overriding the min-width. When the popper used to apply width, popper's width would override the CSS width.

I think a good fix for this could be to apply width: auto to the select that wraps the select menu when popper controls it. So that element would have now width: auto; min-width: {{width of toggle}} - is that something we can do?

[tlabaj]

@mcoker yes, we should be able to make that change