Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and operating system details.
So based on this, it appears to relate to our cols using width in v5 instead of max-width in v4, and our custom select overriding both width and flex when in an input group.
Not sure how to / if we should tackle this honestly. Any thought, @twbs/css-review ?
I'm not sure how we fix this yet, but I do believe it's something we should support. Wonder if there's an alternative solution to how we size those elements within the input group.
The main issue IMHO is that input groups act as rows, where we could expect them to simply impact borders and spacing. What was the reason to switch our columns to width instead of max-width already?
Not quite sure of the way to go either. There're a few ways though:
working around specifity so that width applies correctly (!important on .col-* or setting width: 1% on universal selector in input group to lower specificity)
restoring max-width on columns
dropping flexbox layout from input-group and requiring rows and cols (BC)
etc.
I guess we might find some other ways, using grids or tweaking things around—but I'd say we have a first thing to tackle: what do we expect both input group and columns to do, especially together?
`
This is the code in version 4 it worked
Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and operating system details.
This is a saved reply.
https://codepen.io/cq8j6le8rk59g6g1q43k682hmz/pen/bGqEEYB in Bootstrap 4 https://codepen.io/cq8j6le8rk59g6g1q43k682hmz/pen/LYWGGLa in Bootstrap 5
Got it, thanks :)
So based on this, it appears to relate to our cols using
widthin v5 instead ofmax-widthin v4, and our custom select overriding both width and flex when in an input group.Not sure how to / if we should tackle this honestly. Any thought, @twbs/css-review ?
class: m-col = max-width; class: col = width;
Created two fresh CodePens to remove the card markup:
I'm not sure how we fix this yet, but I do believe it's something we should support. Wonder if there's an alternative solution to how we size those elements within the input group.
The main issue IMHO is that input groups act as rows, where we could expect them to simply impact borders and spacing. What was the reason to switch our columns to
widthinstead ofmax-widthalready?Not quite sure of the way to go either. There're a few ways though:
widthapplies correctly (!importanton.col-*or settingwidth: 1%on universal selector in input group to lower specificity)max-widthon columnsI guess we might find some other ways, using grids or tweaking things around—but I'd say we have a first thing to tackle: what do we expect both input group and columns to do, especially together?