Dynamic select width

Saved searches

Use saved searches to filter your results more quickly

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.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto width / set width to longest option width #4201

Auto width / set width to longest option width #4201

Comments

There are two Stackoverflow questions 1. 2.
and an issue #323 asking addressing the issue. But there is no real solution.

The problem:
When using a standard html select element the width of the element get’s automatically set to the width of the longest/biggest option.
This is not the default behaviour of react-select there is not even a prop to make it behave this way.
In my opinion, a component built to replace/augment the html select should still implement the behaviour of the html element everybody is used to, which makes this more of a bug than a feature.
At least there should be some kind of documentation about this (and why it is not technically feasible or whatever the reason).

The issue #323 does kind of address this but then it is closed without an explanation.

There is another «problem» which is that when inserting a react-select component without setting any width to it, it will not even get the width of the placeholder. Which is also discussed in #323 but this can be solved by modifying the styles of the placeholder,singelValue,menu see #323 for hints on how to.

The text was updated successfully, but these errors were encountered:

Thank you for your quick answer!
But it did not solve the problem.
Additional to the snippet you posted in your answer there is:

This sets a width to the control, which is what I do not want to do as I expect it to have the width of the longest option automatically.

Apologies. I did not click the example links and assumed you were talking about the Menu being as large as the longest item and not the Select itself.

This presents itself as two questions:
1. How do I make the select inline?

I have a working example for this here.
Note that this example goes a bit further to strip away more things to fit a use case someone else had, but the point remains the same. Set the container to inline-block and remove some css properties from SingleValue

2. How do I make the select width equal to the largest option?
Far more complicated.

Control and Menu are siblings so it would be much easier if any of the following were true.

• Menu component show/hides instead of render/not render depending on menuIsOpen
• There were native methods to open and close the menu without messing with menu state

One late consideration I came across is that the total width of the select.
Select Width = Longest possible Option + SingleValue padding (8) + DropdownIndicator width (36)

That all out of the way, the menu width needs to be calculated. I updated the example with the following logic:

1. Add state variable for menuWidth
2. Add styling

• • Control: Set width to menuWidth or auto (coalescing to auto removes transition) and hide with opacity until we have menuWidth
  • Menu: Remove width from menu so it fits content and hide with opacity until we have menuWidth
  • Option: Add paddingRight to account for Dropdown Indicator and padding between it and selected text
  1. Add props for onFocus (to handle getting sizing) and openMenuOnFocus (to «programmatically» trigger menu open)
  2. onMount, focus on Select to trigger menu open
  3. onFocus function checks that there is no menuWidth set yet and if so
  • • wait 0 seconds to allow selectRef.current to update
    • calculate the menuWidth
    • set the menuWidth to state
    • blur the select (to close it)

    The implementation feels clumsy as it relies on setTimeout, but it works. I blame this mostly on the inability to dynamically open/close/render the menu without needing to add menuIsOpen state management everywhere.

    As for adding this as a feature
    I would argue that adding a prop specifically for this feature seems like an edge case, but would instead address the issues that prevents this from being a more straightforward affair (render menu even when menu is closed, or make it easier to open/close menu without completely controlling state). This would allow someone to set the select container style to grid, flex, or even table without adding any complex state changes or DOM width calculations.

    Hopefully, this better answers what you were asking and hope it helps

    @ebonow you provide a workaround to reproduce a standard behavior of the html element this component replace.
    So I agree with @garyee when saying this behavior should be a standard one in this component as the html provided select element

    @mde-pach I understand your perspective, but it is fair to say that this component is a bit more complex and dynamic than a standard select input.

    Please consider the following use-cases:

    • A select does not demonstrate an ability to perform multiSelect
      • This means it never has to contend with the resulting multiple selections being wider than the single longest option
      • This means it never has to dynamically adjust the size of the input with every keystroke as API results could vary wildly per keystroke causing a very disorienting experience for the user as the input width changes after every data fetch

      This is all independent of the code complexity required do the width calculations as props, state, and window size changes of each type of available Select. While I understand that it would be nice to have for some, it would likely result in being more problematic for others as listed above if made to be default behavior which would be matching the behavior of a select as proposed.

      What could arguably be done to better enable this behavior is to allow the menu to be rendered but hidden so the Menu ref would be easier to calculate its width, or simply roll your own controlled isMenuOpen which instead hide/shows content. Then you can add the resizeObserver to the element and watch for width changes and apply some calculation to the width of your Control (taking all of the factors mentioned above into account).

      There are likely others who may be interested in this functionality and I would encourage you or anyone else to put together a codesandbox and share it in the Show and Tell discussion room This is an open source project and thoroughly encourage the community to contribute and share if you or anyone else feels inclined to build such functionality. This however is something that likely does not fit in the roadmap, and instead as a custom developer built component that can be shared with the community. If you would like to continue to discuss the merits of this as a feature, please feel free to start a discussion, but I will be closing this as an issue in an effort to get through known bugs and critical issues.

      Источник

      Set select element width equal to it’s option’s content width dynamically

      The following script resizes the width of HTML’s tag dynamically according to the width of the selected option. This may be used in places where you want to customize the select tag and make it look like a dropdown select.,Auto resizing the SELECT element according to selected OPTION’s width,How would I change the width of a select box based on the current selection?,How to expand the select box to its default width on focus using CSS

      Source code

            .resizeselect 
      Dynamic Width of HTML Select Tag
       
      Resize the width of HTML's tag according to the width of the selected option.
       Address one Address two - this is a medium text This is a Long Address for testing purpose This one is a long text - this one is a long text - this one is a long text      

      Answer by Gia Carpenter

      By default the size of the element is depend on the size of the largest text. However, sometimes it is useful to set a fixed width to the select box and increase its size back to the original size when the user tries to select some option (i.e. on focus).,The following example demonstrates how to implement this effect with pure CSS:,Here are some more FAQ related to this topic:,How to disable resizable property of textarea using CSS

           select < width: 150px; margin: 10px; >select:focus  
       Choose This option is large This option is very large This option is very very large This option is very very very large  
        

      Answer by Zola Figueroa

      Buidin select controls in browsers adjust width depending to options and this is default behaviour.,Is your feature request related to a problem? Please describe. Default behavior is to size itself to the width of the longest option it contains. This allows for the select to stay fixed width throughout the process of selecting options and prevents «content jumping» in inline forms.,For Those who also want to change of the input width dynamically, it looks shit but hey it works,It never really worked properly. It’s not only about the dropdown, but also the container itself, because it has to hold the longest value, too, when selected.

      Answer by Kobe McIntosh

      To create the inputs of the same width, we have to use some CSS attributes in our program.,box-sizing: It defines how the height and width of the element are calculated.,In this article, we would be learning how to make the input and select elements to be of the same width and height.,Example: In the following CSS code we create both the elements of the same width. Below is the code for CSS in which we will use some attributes which were discussed earlier.

      Answer by Luciano Flowers

      Setting a specific size,The natural or intrinsic size of things,In the example above, try adding some text inside the empty element. The border now contains that text because the height of the element is defined by the content. Therefore the size of this in the block dimension comes from the size of the content. Again, this is the intrinsic size of the element — its size is defined by its content.,HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image file contains sizing information, described as its intrinsic size. This size is determined by the image itself, not by any formatting we happen to apply.

      HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image file contains sizing information, described as its intrinsic size. This size is determined by the image itself, not by any formatting we happen to apply.

      If you place an image on a page and do not change its height or width, either by using attributes on the tag or else by CSS, it will be displayed using that intrinsic size. We have given the image in the example below a border so that you can see the extent of its size as defined in its file.

      Источник

      Make select tag width equal to the selected option

      The following script resizes the width of HTML’s tag dynamically according to the width of the selected option. This may be used in places where you want to customize the select tag and make it look like a dropdown select.

      Demo

      Source code

            .resizeselect 
      Dynamic Width of HTML Select Tag
       
      Resize the width of HTML's tag according to the width of the selected option.
        Address one Address two - this is a medium text This is a Long Address for testing purpose This one is a long text - this one is a long text - this one is a long text      

      Related Queries:

      • Dynamic select tag width
      • Auto resizing the SELECT element according to selected OPTION’s width
      • How to expand the select box to its default width on focus using CSS
      • How would I change the width of a select box based on the current selection?

      Источник