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

 
<html>

   <header>

   </header>
 
   <body>

      <table width="auto" border="1" cellspacing="0" cellpadding="0" >

         <tr height="auto">

            <td width="2">   <!-- just add a little spacing to the left edge -->

            </td>
 
            <td width="99%" align="left" valign="top" class="OrderImageName" nowrap>

               <table>

                  <tr>

                     <td nowrap align="center">

                        some data goes here

                     </td>

                  </tr>

               </table>

            </td>
 
            <td valign="top">

               <table width="auto" border="1" cellspacing="0" cellpadding="0">

                  <tr>

                     <td>

                        &nbsp;

                     </td>
 
                     <td align="center" >

                        Types

                     </td>
 
                     <td width="2">   <!-- just add a little spacing to the right edge -->

                        &nbsp;

                     </td>

                  </tr>
 
                  <tr>

                     <td align="left" nowrap >

                        &nbsp;Item #1

                     </td>
 
                     <td nowrap>

                        <select style="{width: auto}" >

                           <option>&lt;none&gt;</option>

                           <option>aaaaa aaaaaa</option>

                        </select>

                     </td>

                  </tr>
 
                  <tr>

                     <td align="left" nowrap >

                        &nbsp;Item #2

                     </td>
 
                     <td nowrap>

                        <select style="{width: auto}" >

                           <option>&lt;none&gt;</option>

                           <option>aaaaaaa aaaa aaaaaa</option>

                           <option>aaaaaaa aaaa aaaaaa</option>

                           <option>aaaa</option>

                        </select>

                     </td>

                  </tr>
 
                  <tr>

                     <td align="left" nowrap >

                        &nbsp;Item #3

                     </td>
 
                     <td nowrap>

                        <select style="{width: auto}" >

                           <option>&lt;none&gt;</option>

                           <option>aaaa aaaaaa aa aaaaaa</option>

                           <option>aaaa aaaaaa aa aaaaaaa</option>

                           <option>aaaa aaaaaa aa aaaaaa</option>

                           <option>aaaa aaaaaa aaaa</option>

                           <option>aaaaaaaa aa aaaaaa</option>

                           <option>aaaaaaaa aa aaaaaaa</option>

                           <option>aaaaaaaa aa aaaaaa</option>

                           <option>aaaaaaaa aaaa</option>

                           <option>aaaaaaaa aa aaaaaa, aaaa</option>

                           <option>aaaaaaaa aa aaaaaaa, aaaa</option>

                           <option>aaaaaaaa aa aaaaaa, aaaa</option>

                           <option>aaaaaaa aaaaaaaa aa aaaaaa</option>

                           <option>aaaaaaa aaaaaaaa aa aaaaaaa</option>

                           <option>aaaaaaa aaaaaaaa aa aaaaaa</option>

                           <option>aaaaaaa aaaaaaaa aaaa</option>

                           <option>aaaaaaa aaaaaaaa aa aaaaaa, aaaa</option>

                           <option>aaaaaaa aaaaaaaa aa aaaaaaa, aaaa</option>

                           <option>aaaaaaa aaaaaaaa aa aaaaaa, aaaa</option>

                           <option>aaaaaaa</option>

                        </select>

                     </td>

                  </tr>

               </table>

            </td>
 
            <td>

               <table height="auto" >

                  <tr height="50%" valign="top" >

                     <td valign="top" align="right" >

                         XXXXXX

                     </td>

                  </tr>
 
                  <tr height="50%" >

                     <td valign="bottom" align="right" >

                         YYYYYY

                     </td>

                  </tr>

               </table>

            </td>

         </tr>

      </table>

   </body>

</html>

Jul 3 '08 #1

Subscribe Post Reply

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

 
<table width="" cellspacing="0" cellpadding="0" border="1">

<tbody>

<tr>

</tr>

<tr>

<td nowrap="" align="left">  Item #1 </td>

<td nowrap="">

<select style="width: 100%;">

</select>

</td>

</tr>

<tr>

<td nowrap="" align="left">  Item #2 </td>

<td nowrap="">

<select style="width: 100%;">

</select>

</td>

</tr>

<tr>

<td nowrap="" align="left">  Item #3 </td>

<td nowrap="">

<select style="width: auto;">

</select>

</td>

</tr>

</tbody>

</table>

Jul 4 '08 #2

Similar topics

Getting PHYSICAL monitor size in C#

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....

C# / C Sharp

Datagrid column size/width without headerstyle

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...

ASP.NET

How to get the actual size (width*height) of flash file?

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!

Visual Basic .NET

textBox1.Size.Width

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...

C# / C Sharp

How to control the size(width of a combo box generated in asp?)

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...

ASP / Active Server Pages

Getting the paper size for a custom printer form

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

Visual Basic .NET

How to make change one frame size (width) when I clicked a button on anothoer frame?

by: ABC | last post by:

How to make change one frame size (width) when I clicked a button on anothoer frame?

ASP.NET

How to get an active window's size (width and height)

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...

Visual Basic .NET

find the size(width & height) of the image before uploading C#

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

.NET Framework

Windows 11 and Access Combo Box Issue

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...

Microsoft Access / VBA

Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables

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...

Networking - Hardware / Configuration

Energy Model code modification to account for year dependent interest rate

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...

Python

Send Current Object to PDF

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 :...

Microsoft Access / VBA

VBA Class Basics

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...

Microsoft Access / VBA

Report value list

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...

Microsoft Access / VBA

Access Europe Meeting - Wed 1 Nov - Using SQL Server skills to extend Access

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...

Microsoft Access / VBA

VBA Class Basics (Report Class)

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...

Microsoft Access / VBA

Take a Database to the Next Level

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...

Microsoft Access / VBA