Select Menu extends only to width of current selection

[djr33]

This may be a question for Javascript or CSS, or perhaps there's something I'm not thinking of.


What I have is a select menu that is too wide for the layout of my page. The reason is that some of the items in it are much wider than others. This menu is based on the current page and most of the items in the list are very short. Of course when one of the longer items is selected it's fine to have the menu be wider, but when a short item is selected is there any way to not have all the extra whitespace based on the longest item in the list?

I tried setting a width, but of course this just is standard then regardless of which item is selected and cuts off the longer ones.

I don't know how this would be approached using Javascript because it is variable width based on letters and that's not something easy to measure.


---
An alternative (actually my preference if possible) is to display something else when the menu is not open and when it is open the regular select menu. Plain text with a box around it would be fine (and I can work on the details later once that's setup).
The site already requires Javascript [there's a non-JS fallback], so it's not a problem if this must be done with Javascript writing and rewriting the select or something.
---

Thanks in advance for ideas.




I don't have a test page up for the moment because it's a component of something else, but if you need a demo I can create one-- but it's mostly irrelevant because this is just a general question, not specific to my site.

[molendijk]

Something like this (http://www.dynamicdrive.com/forums/showthread.php?t=51862), maybe?
===
Arie Molendijk.

[djr33]

Thanks, Arie. That's close.

The problem is that I don't know the width of what will be in the 'selected' box. I need it to adjust to what IS selected, but not to the widest of the other non-selected elements.

Here's a basic example:

Take the select menu:
1
12
123
1234

If you have [1] selected, I want exactly that and not [1___] (followed by three spaces). If you have [1234] selected, obviously it must show all of it (and not default to a shorter width).
I want the width of the select menu to then result like this:
[1]
[12]
[123]
[1234]
...where the width is variable and changes when you change the element.


The annoying effect of changing its width will not be a problem: it will rarely change without reloading the page (only if Javascript is disabled), and it's not used often. Because of this, I don't want it wasting "real estate" on the screen with the extra whitespace.



The dropdown menu itself should retain the original width, just not the box-- exactly like in your example. So what you posted is half of what I'm looking for. It's the other half that really confuses me though: how can the width of the select box be variable based on the text: how would we know how wide the text is, or is there another way around it?

[molendijk]

It's the other half that really confuses me though: how can the width of the select box be variable based on the text: how would we know how wide the text is, or is there another way around it?
That's complicated! It must have something to do with option....length. Maybe somebody has an idea?
===
Arie.

[djr33]

But wouldn't the length be thought of as the current length? So it would just be the same as the width of the select menu as a whole?
Or, maybe you mean length of the text (number of characters). From that is it possible to get a pixel width or something else that will work?

[molendijk]

Could this be useful?


<select>
<option id="first_option">first</option>
<option id="second_option">second second</option>
<option id="third_option">third third third</option>
</select>


<br>
<a href="javascript: void(0)" onclick=alert(document.getElementById('first_option').innerHTML.length)>length of first option</a><br>
<a href="javascript: void(0)" onclick=alert(document.getElementById('second_option').innerHTML.length)>length of second option</a><br>
<a href="javascript: void(0)" onclick=alert(document.getElementById('third_option').innerHTML.length)>length of third option</a><br>

===
Arie.

[djr33]

It seems close, but I don't know how to translate character count to text width. This isn't a monospace font, or I'd try using Ms.

[molendijk]

An alternative (actually my preference if possible) is to display something else when the menu is not open and when it is open the regular select menu.
Well, the only thing I can come up with is something (http://www.let.rug.nl/molendyk/NavigationWithSelect3/page1.html) I wrote in the past. But I don't know if you want something like that. (And I think my function can be simplified).
===
Arie.

[djr33]

Ah, that's an interesting way to do it. It seems a little hard to use (for example if someone doesn't have a good mouse or has motor-control issues), but that is a great way to handle it visually.
Is it possible to skip past the popped-up-but-not-expanded state? Perhaps onclick instead of onmouseover and then automatically opening the list rather than just making it appear-- I'm not sure if JS can do this.

[molendijk]

Is it possible to skip past the popped-up-but-not-expanded state? Perhaps onclick instead of onmouseover and then automatically opening the list rather than just making it appear-- I'm not sure if JS can do this.
JS cannot do this, unfortunately. I have been looking for the solution you suggest myself - for quite a while - and noticed that the list only opens after the selectbox itself is clicked.
===
Arie.

[djr33]

Ok. In the end it may make sense to just use a regular dropdown menu instead. I've had the select there for a while (but operating in a different way), so I suppose it's time to move on. I'll see what the options are. However, I like the hover option with the select. That's useful (for other projects also).