1

I have a select with a fixed width but I need to change the height of the select to fit the all the options, so that the entire option text is shown rather than it being cut off. I have tried setting the height to an arbitary value of 80px and adding whitespace:pre-wrap which works but this means that the shorter options are obviously still 80px tall so they take up more room than they need to. Below is an example of a select that I am trying to work with.

<select style='padding: 0.5rem; white-space:pre-wrap; width: 100%; height:80px;'>
  <option>Text 1</option>
  <option>Text 1 Lots of additional text that needs additional room</option>
  <option>Text 1 Some extra text</option>
</select>
David Benz
  • 49
  • 6
  • 2
    I don't believe this is possible with the standard ` – AStombaugh Jun 13 '22 at 14:16
  • Thanks i'll have a look around to see if there are any react packages like that. – David Benz Jun 13 '22 at 14:17
  • https://stackoverflow.com/questions/2864238/line-break-in-html-select-option There's a few work-arounds that might work for you but they produce a different result too so maybe worth giving those a shot as well. Most of them utilize some form of jquery though so it's not really a direct answer to your question unfortunately. – AStombaugh Jun 13 '22 at 14:20

0 Answers0