Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

Getting select to properly size width

Question posted by: RichardR (Newbie) on July 3rd, 2008 08:04 PM
I have a webpage which has a table that contains a column with several drop down boxes (<SELECT>). The contents of the drop down boxes are dynamically populated so I have no idea what the actually width will be necessary.

How do I tell the dropdown (<SELECT>) and/or column (<TD>) to automatically size itself to the greater of widest item in the dropdown, and then get the smaller dropdowns to fill the width of the column?

If I specify in the SELECT tag, STYLE="{width: 100%;}" the dropdown boxes will expand to the column, but does not cause the column itself to expand to the width necessary to display the items in the dropdowns. When I specify STYLE="{width: auto}" in the SELECT tag, the dropdowns will expand to widest item in the dropdown, and causes the column to expand to hold the dropdown. But, the smaller dropdowns do not expand to fill the column width.

I tried specifying "margin-left: 0px; margin-right: 0px;" and "margin-left: 0px; margin-right: 0px; display: table-cell;" in the SELECT's style but they didn't make any difference.

Does anyone have any suggestions?

Below is a plain HTML example with shows the issue. (BTW, I've been testing the code in IE 6.)

Thanks,

Richard

Code: ( text )
  1. <html>
  2.    <header>
  3.    </header>
  4.  
  5.    <body>
  6.       <table width="auto" border="1" cellspacing="0" cellpadding="0" >
  7.          <tr height="auto">
  8.             <td width="2">   <!-- just add a little spacing to the left edge -->
  9.             </td>
  10.      
  11.             <td width="99%" align="left" valign="top" class="OrderImageName" nowrap>
  12.                <table>
  13.                   <tr>
  14.                      <td nowrap align="center">
  15.                         some data goes here
  16.                      </td>
  17.                   </tr>
  18.                </table>
  19.             </td>
  20.  
  21.             <td valign="top">
  22.                <table width="auto" border="1" cellspacing="0" cellpadding="0">
  23.                   <tr>
  24.                      <td>
  25.                         &nbsp;
  26.                      </td>
  27.  
  28.                      <td align="center" >
  29.                         Types
  30.                      </td>
  31.  
  32.                      <td width="2">   <!-- just add a little spacing to the right edge -->
  33.                         &nbsp;
  34.                      </td>
  35.                   </tr>
  36.  
  37.                   <tr>
  38.                      <td align="left" nowrap >
  39.                         &nbsp;Item #1
  40.                      </td>
  41.  
  42.                      <td nowrap>
  43.                         <select style="{width: auto}" >
  44.                            <option><none></option>
  45.                            <option>aaaaa aaaaaa</option>
  46.                         </select>
  47.                      </td>
  48.                   </tr>
  49.  
  50.                   <tr>
  51.                      <td align="left" nowrap >
  52.                         &nbsp;Item #2
  53.                      </td>
  54.  
  55.                      <td nowrap>
  56.                         <select style="{width: auto}" >
  57.                            <option><none></option>
  58.                            <option>aaaaaaa aaaa aaaaaa</option>
  59.                            <option>aaaaaaa aaaa aaaaaa</option>
  60.                            <option>aaaa</option>
  61.                         </select>
  62.                      </td>
  63.                   </tr>
  64.  
  65.                   <tr>
  66.                      <td align="left" nowrap >
  67.                         &nbsp;Item #3
  68.                      </td>
  69.  
  70.                      <td nowrap>
  71.                         <select style="{width: auto}" >
  72.                            <option><none></option>
  73.                            <option>aaaa aaaaaa aa aaaaaa</option>
  74.                            <option>aaaa aaaaaa aa aaaaaaa</option>
  75.                            <option>aaaa aaaaaa aa aaaaaa</option>
  76.                            <option>aaaa aaaaaa aaaa</option>
  77.                            <option>aaaaaaaa aa aaaaaa</option>
  78.                            <option>aaaaaaaa aa aaaaaaa</option>
  79.                            <option>aaaaaaaa aa aaaaaa</option>
  80.                            <option>aaaaaaaa aaaa</option>
  81.                            <option>aaaaaaaa aa aaaaaa, aaaa</option>
  82.                            <option>aaaaaaaa aa aaaaaaa, aaaa</option>
  83.                            <option>aaaaaaaa aa aaaaaa, aaaa</option>
  84.                            <option>aaaaaaa aaaaaaaa aa aaaaaa</option>
  85.                            <option>aaaaaaa aaaaaaaa aa aaaaaaa</option>
  86.                            <option>aaaaaaa aaaaaaaa aa aaaaaa</option>
  87.                            <option>aaaaaaa aaaaaaaa aaaa</option>
  88.                            <option>aaaaaaa aaaaaaaa aa aaaaaa, aaaa</option>
  89.                            <option>aaaaaaa aaaaaaaa aa aaaaaaa, aaaa</option>
  90.                            <option>aaaaaaa aaaaaaaa aa aaaaaa, aaaa</option>
  91.                            <option>aaaaaaa</option>
  92.                         </select>
  93.                      </td>
  94.                   </tr>
  95.                </table>
  96.             </td>
  97.  
  98.             <td>
  99.                <table height="auto" >
  100.                   <tr height="50%" valign="top" >
  101.                      <td valign="top" align="right" >
  102.                          XXXXXX
  103.                      </td>
  104.                   </tr>
  105.  
  106.                   <tr height="50%" >
  107.                      <td valign="bottom" align="right" >
  108.                          YYYYYY
  109.                      </td>
  110.                   </tr>
  111.                </table>
  112.             </td>
  113.          </tr>
  114.       </table>
  115.    </body>
  116. </html>
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
henryrhenryr's Avatar
henryrhenryr
Member
99 Posts
July 4th, 2008
02:33 PM
#2

Re: Getting select to properly size width
How are you generating your page?

If you are just coding the HTML, then specify width:100% on the smaller ones and width:auto on the biggest one.

Probably it's generated dynamically. So make the standard rule width:100% and then in whatever you use to generate the HTML, determine which select will be longest (for example, count the characters of the <option> elements) and specify that one only to be width:auto. That way you will always have one select which is width:auto, forcing the td size to fit it, while the others simple expand to the td width.

ie. you're trying to get this (assuming the third one is the biggest):

Code: ( text )
  1. <table width="" cellspacing="0" cellpadding="0" border="1">
  2. <tbody>
  3. <tr>
  4. </tr>
  5. <tr>
  6. <td nowrap="" align="left">  Item #1 </td>
  7. <td nowrap="">
  8. <select style="width: 100%;">
  9. </select>
  10. </td>
  11. </tr>
  12. <tr>
  13. <td nowrap="" align="left">  Item #2 </td>
  14. <td nowrap="">
  15. <select style="width: 100%;">
  16. </select>
  17. </td>
  18. </tr>
  19. <tr>
  20. <td nowrap="" align="left">  Item #3 </td>
  21. <td nowrap="">
  22. <select style="width: auto;">
  23. </select>
  24. </td>
  25. </tr>
  26. </tbody>
  27. </table>

Last edited by henryrhenryr : July 4th, 2008 at 02:36 PM. Reason: extra detail
Reply
Reply
Not the answer you were looking for? Post your question . . .
184,041 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
Top HTML / CSS Forum Contributors