CODEWITHSUNDEEP
javascriptcss
Nicus
Nicus

Reputation: 1

Is there a way of adjusting the width of a <select> according to the length of the selected <option> within?

I want to achieve something like Amazon has to the left of its Search bar (eventhough they are using divs).

I guess css alone doesn't do the trick. I figure javascript is needed to count the letters of the selected and multiply it for some value (maybe 3px?) and apply that as width of the parent .

Upvotes: 0

Views: 62

Answers (2)

Nikola R.
Nikola R.

Reputation: 1173

You can just add width: auto; and display: inline-block; to the div that will represent option item and it will resize automatically depending on it's content.

http://jsfiddle.net/JKxTQ/1/

UPDATE 2:

Use div as an width indicator so you can use it's width to resize your select box:

http://jsfiddle.net/JKxTQ/6/

Upvotes: 1

BlueCacti
BlueCacti

Reputation: 10820

Using Chrome's 'Inspect Element', I've only found that using width: auto, on both the select as the div it migh be surrounded with, should do the trick.

Upvotes: 0

Related Questions