CODEWITHSUNDEEP
htmlcss
abhishek vashistha
abhishek vashistha

Reputation: 91

multiple select option not getting displayed properly

Following is my code 

<select id="accessList" name="accessList" multiple="multiple" style="position:relative;left:5px;overflow-x:auto;width:200px">
     <option value="36453" style="text-align:left;width:auto">TestGroupterminal121251221231321321321231321321231111111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
</select>

Option value not displayed completly when option is selected.

Image below show non-selected vs selected :

enter image description here

Upvotes: 2

Views: 1025

Answers (2)

beerwin
beerwin

Reputation: 10327

The simple answer is that you can't do that (despite Roy's answer seems to work in Chrome and Edge).

Why?

When it's about styling <select>s, browsers have always been quirky. This is just another case. To be sure, I have loaded your fiddle in multiple browsers (all latest).

These are the results:

  • Edge and Chrome exhibit the behavior you presented.
  • Your code in Internet Explorer 11 and Firefox Developer edition (latest) simply doesn't work.
  • Roy's code works in Edge and Chrome, but doesn't in IE 11 and Firefox.

This is the very reason why are so many select styling Javascript plugins out there.

Upvotes: 1

Roy Bogado
Roy Bogado

Reputation: 4472

check the display:inline-block on option, it makes option full width at selected.
Hope it helps.

<select id="accessList" name="accessList" multiple="multiple" style="position:relative;left:5px;overflow-x:auto;width:300px">
     <option value="36453" style="text-align:left;display:inline-block">TestGroupterminal121251221231321321321231321321231111111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
</select>

Upvotes: 0

Related Questions