Welcome to WebmasterWorld Guest from 54.242.94.72

Forum Moderators: incrediBILL

Message Too Old, No Replies

Select list widths

     

Orangutang

3:29 pm on Feb 13, 2011 (gmt 0)

5+ Year Member



Hi,

I'm trying to specify a fixed width for the initial select list display field irrespective of the lengths of the option values it contains.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<td align='left' width='150'>
<select name=testwidth>
<option value='a'>Short</option>
<option value='b'>Very Long</option>
</select>
</td>

The option value length is specified earlier on in the application with maxlength on the input to ensure its width is no longer than the space available with width='150'.

The select list above will be the width of Very Long and the width of 150 is more than that.

My question is how can I control the width of the display irrespective of how long Very Long is.

A prefect example is yahoo email, inbox displays your emails and you've got buttons to delete and spam and select lists for mark as and move to.

The select lists mark as and move to have an initial select list display field which is shorter than the lengths of the option values it contains.

mark as has Mark as the text display with a width of about 50px for the <td> but when you click it the first option is Mark as Unread which is clearly longer than Mark.

How do they do that then?
Thanks for any help in advance.

incrediBILL

6:51 pm on Feb 13, 2011 (gmt 0)

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



If I understand the question correctly, simply specify the maximum width of the select list, as the width of the table cell won't control the width of the selection list.

example:
<select style="position: relative; width: 100px">

Orangutang

9:28 am on Feb 14, 2011 (gmt 0)

5+ Year Member



Hi incrediBILL,

Perfect, exactly what I was after. Thanks.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month