Making select width equal to width of wrapping parent

[hari5004]

Environment

• Package version(s): 3.x
• Browser and OS versions: NA

Question

How to set the width of select component to match the width of its parent div.

[giladgray]

@hari5004 a few options:

1. usePortal={false} and then add some width: 100% / fill modifiers will allow the select and target to easily share dimensions.
2. hardcode width on both.
3. submit a PR to add support for this in the components.

[giladgray]

also see #2094

[eliekhoury]

2. hardcode width on both.

@giladgray what would be the best way to set the width of the Select popover?

[gorazu]

hello, I have a similar issue, I set the popoverProps with usePortal={false} then if I add width: 100% to bp3-popover and bp3-transition-container its still not working (even with container set to display: block.

I see that a translate 3d is set tot the bp3-transition-container but I can not override it to display the popover relative to the container.

ps: with hardcoded width on both target and menu it works fine.

any advices @giladgray ?

[Cody0913]

I was looking into this as it is a very common item I use and would love to see this enhancement implemented.
I started working on a few different tests in seeing how to accomplish this (as I do not commonly work with ts).
My proposal, and I have made these changes locally, is to add a fill param on the popover and set it as true when passing the popoverProps from the Select (this would also require a fill param passed to the input/button used in either a Select, Suggest, etc. I also made a change so that when the fill prop is true in the popover this param is also added to child in which this wraps.
I was going to try and simplify it even further so that this prop is set on the Select and is passed through this same method for simplicity.

My changes were adding what was above for props but also having it so that anywhere a condition was being used for usePortal would also take into account if fill is set as these would conflict with each other.

I also added so that where popper calculates it's transition if fill is set to true then it will not calculate and instead will just have a bp3-fill class added, with the appropriate style added. Since this is removed it no longer gets position absolute.

If anyone has any other suggestions or methods to perform this I am all ears. Figured I'd take a whack at it and that is the solution I found easiest with the least amount of interference.

[LoiKos]

Still having the issue with Select popover width ! I think this is a huge improvement to get something to do it automatically and stop hardcode width to make it work.

[adidahiya]

The fill prop was added to Popover, Suggest, and MultiSelect here: #3636. It should be pretty easy to make a PR to add the same prop to Select, following the code in that PR.

[LoiKos]

@adidahiya i'll try to take a look but can't say when. btw MultiSelect fill props work fine for TagInput but for popover it add the bp3-fill class on div with class bp3-popover-wrapper but that doesn't fit as expected because bp3-transition-container doesn't fill parent.

And you need to define usePortal on popover to false too

[aamirbutt]

Hi guys, any update on when this will be implemented as part of the library?
I am on @blueprintjs/select 3.14.3