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

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

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

Eliyahu Goldin

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

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
How to position the *tooltip* comment on these buttons? 9
I am trying to make an audio player, how do I get the selected file to be playable? 5
Problems with Drop Down List Control 0
Drop Down and textBox 4
Fading effect between play and play-over and pause and pause-over 0
Drop Down List Issue 0

Members online

Total: 36 (members: 3, guests: 33)
Robots: 430

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,052
Latest member
LucyCarper

Latest Threads

Top