Problem with Listbox having dynamic content with a minimum width

[cshaw]

Hello Everyone, I am having problems with a listbox control. I have a
page with a couple of labels and drop-down lists at the top, and then
below there is a table with two columns, the first column contains a
listbox and the second column contains some buttons. I am trying to
display it such that if the listbox is empty it will be at least 100px
wide, but if there is content in the box I want it to expand
dynamically such that if the content is 200px wide the listbox will
expand to show all the content. I have tried using the min-width style
property without any success.

The following is the code from the table portion of my page, I have
included the css class used for the listbox. For some reason in IE7
the minimum width is getting ignored, In fact the listbox is given the
same width of the column, which in this case isn't set so it is
defaulting to 0! In firefox the listbox has a minimum width of 100px
when there is no content, and it expands to the width of the content
if it is bigger, so it works as expected! any suggestions on how to
get this to work in IE7(or even IE6) or any links to some good CSS
tutorials would be greatly appreciated!

..DynamicListbox
{
min-width:100px;
width:100%;
}

<table>
<tr vAlign="top">
<td>
<asp:listbox id="m_lbxFieldMappings" runat="server"
Rows="12" CssClass="DynamicListbox"></asp:listbox>
</td>
<td vAlign="top">
<p>
<asp:button id="m_btnMoveUp" Text="Move Up"
Runat="server" CssClass="btn" Width="85px"></asp:button>
<br>
<asp:button id="m_btnMoveDown" Text="Move Down"
Runat="server" CssClass="btn" Width="85px"></asp:button>
</p>
<p>
<asp:button id="m_btnAddFieldMap" Text="Add Field Map"
Runat="server" CssClass="btn" Width="85px"></asp:button>
<br>
<asp:button id="m_btnEditFieldMap" Text="Edit Basics"
Runat="server" CssClass="btn" Width="85px"></asp:button>
<br>
<asp:button id="m_btnEditFieldMapFields" Text="Edit Fields"
Runat="server" CssClass="btn" Width="85px"></asp:button>
<br>
<br>
<br>
<asp:button id="m_btnDeleteFieldMap" Text="Delete" Runat="server"
CssClass="btnCritical" Width="85px"></asp:button>
</p>
</td>
</tr>
</table>

Thanks again for your time and expertise, Cam

 

[bruce barker]

you need two classes, one for empty and one for data.


-- bruce (sqlwork.com)

 

[Cam]

you need two classes, one for empty and one for data.

-- bruce (sqlwork.com)

Thanks for your response Bruce,
Are you suggesting that I use two CSS classes, and then set the CSS
class depending on the content? If that is the case it would be just
as easy to set the width after checking for content, I could then set
Width=100px if there is no content and then set Width=Auto if there is
content. However this would require a major code change because these
listboxes are used on 30 different pages throughout my app and I would
have to make the same change to the binding method on each page.

I am asking if there is a way to use the min-width attribute that is
allegedly supported by IE7, or some other way to have the page act as
though the listbox has a minimum width. In the past I have used a 2X2
table with a div in the second row and the same column as the listbox.
The div is set with a width of 100px, and the listbox in the above row
has a width of 100%. The listbox will then be at least 100px because
of the div in the lower row, and in firefox the listbox will expand to
the width of the content if it is greater than 100px, however in IE
the width always stays at 100px, no matter what the content is.

Is there a way to get the min-width style attribute working in IE7 or
possibly another work-around like I had mentioned above to simulate a
minimum width that won't need a change to the C# code, but rather just
to the HTML?