Easiest way to make drop down list and textbox the same width

  • Thread starter Thread starter Greg
  • Start date Start date
G

Greg

Embarassingly simple this one :(
The below html renders the drop down significantly shorter than the
textbox. Which setting (border etc) is the correct way to get these 2
controls to appear the same width?


<select name="DropDownList1" id="DropDownList1" style="width:
100px;"></select>
<br />
<input name="TextBox1" type="text" id="TextBox1" style="border-
style:None;width:100px;" />


Greg.
 
Greg,

Put them both in the same container, like a <div> or a <td>, and set
width:100% for both of them.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]http://msmvps.com/blogs/egoldinhttp://usableasp.net


Embarassingly simple this one :(
The below html renders the drop down significantly shorter than the
textbox. Which setting (border etc) is the correct way to get these 2
controls to appear the same width?
Click to expand...
<select name="DropDownList1" id="DropDownList1" style="width:
100px;"></select>
<br />
<input name="TextBox1" type="text" id="TextBox1" style="border-
style:None;width:100px;" />
Click to expand...
Greg.
Click to expand...
Click to expand...

Thanks Eliyahu - putting them in a <td> was the first thing that I
tried - it doesnt work though - they are still unequal lengths.

Greg.
 
Did you set
<select name="DropDownList1" id="DropDownList1" style="width:
100%;"></select>
and
<input name="TextBox1" type="text" id="TextBox1"
style="border-style:None;width:100%;" />
?
--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


Greg said:
Greg,

Put them both in the same container, like a <div> or a <td>, and set
width:100% for both of them.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP
[ASP.NET]http://msmvps.com/blogs/egoldinhttp://usableasp.net


Embarassingly simple this one :(
The below html renders the drop down significantly shorter than the
textbox. Which setting (border etc) is the correct way to get these 2
controls to appear the same width?
Click to expand...
<select name="DropDownList1" id="DropDownList1" style="width:
100px;"></select>
<br />
<input name="TextBox1" type="text" id="TextBox1" style="border-
style:None;width:100px;" />
Click to expand...
Greg.
Click to expand...
Click to expand...

Thanks Eliyahu - putting them in a <td> was the first thing that I
tried - it doesnt work though - they are still unequal lengths.

Greg.
Click to expand...
 
Did you set
<select name="DropDownList1" id="DropDownList1" style="width:
100%;"></select>
and
<input name="TextBox1" type="text" id="TextBox1"
style="border-style:None;width:100%;" />
?
--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]http://msmvps.com/blogs/egoldinhttp://usableasp.net


Greg,
Put them both in the same container, like a <div> or a <td>, and set
width:100% for both of them.
--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP
[ASP.NET]http://msmvps.com/blogs/egoldinhttp://usableasp.net

Embarassingly simple this one :(
The below html renders the drop down significantly shorter than the
textbox. Which setting (border etc) is the correct way to get these 2
controls to appear the same width?
<select name="DropDownList1" id="DropDownList1" style="width:
100px;"></select>
<br />
<input name="TextBox1" type="text" id="TextBox1" style="border-
style:None;width:100px;" />
Greg.
Click to expand...
Click to expand...
Thanks Eliyahu - putting them in a <td> was the first thing that I
tried - it doesnt work though - they are still unequal lengths.
Click to expand...
Greg.
Click to expand...
Click to expand...



Yes,

Just and it still doesn't work - here is the complete aspx code:

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
&nbsp;<br />
<br />
<table>
<tr><td style="width: 372px"> <select
name="DropDownList1"
id="DropDownList1" style="width:100%;"></
select></td></tr>
<tr><td style="width: 372px"><input name="TextBox1"
type="text"
id="TextBox1"style="border-style:None;width:
100%;" /></td></tr>
</table>
</div>
</form>
</body>
</html>


I'm so surprised that this isn't getting the 2 controls to be the same
widths. It should be a no-brainer!

Thanks,

Greg.
 
Back
Top