472,962 Members | 2,386 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,962 software developers and data experts.

Getting select to properly size width

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

Expand|Select|Wrap|Line Numbers
  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>&lt;none&gt;</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>&lt;none&gt;</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>&lt;none&gt;</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>
  117.  
Jul 3 '08 #1
1 23793
henryrhenryr
103 100+
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):

Expand|Select|Wrap|Line Numbers
  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>
  28.  
Jul 4 '08 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

4
by: Valerie Hough | last post by:
Does anyone have an example of how to get the PHYSICAL monitor size in C#? In C++ I used to use GetDeviceCaps( dc, HORZSIZE ) which returns the monitor size in mm, then I converted it to inches....
1
by: Drew | last post by:
Hey, thanks in advance for helping me out with my problem: I have a datagrid which is embedded in another datagrid. The datagrid is filled directly by a dataset generated from a sql query. So...
3
by: yxq | last post by:
Hello, I use the com component "shockwave flash object" to play flash file, but how to get the actual size (width*height) of flash file but no control size? thank you!
5
by: Pohihihi | last post by:
Why can't the following work when it has a set property defined? this.textBox1.Size.Width = 25; I get error Cannot modify the return value of 'System.Windows.Forms.Control.Size' because it is...
8
by: Jack | last post by:
Hi, I have a asp page where multiple rows for a client is generated using asp. Some of these are combo boxes and some are text and are coming from a recordset. Now, the following is the code to...
1
by: Allen | last post by:
Have you successfully added a custom form and then retrieved the paper size using VB. I tried GetDeviceCaps(Hdc, PHYSICALWIDTH) GetDeviceCaps(Hdc, PHYSICALHEIGHT) and
0
by: ABC | last post by:
How to make change one frame size (width) when I clicked a button on anothoer frame?
2
by: kimiraikkonen | last post by:
Hi, I need to show an active window's (form) size(width and height in pixels) in message box, however there are some low-level api calls in user32.dll but i don't know which function returns the...
1
by: gopim | last post by:
i uploaded image into database.but i want to restrict if images having more size(width & height) before uploading into database. could any please give information regarding this
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
2
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.