Why a asp:DropDownList and a asp:TextBox of the same width appear differently

Question

I am using the below code inside of a table:

<tr>
    <td>User Language:</td>
    <td>
        <asp:DropDownList ID="Language" runat="server" Width="200px">
            <asp:ListItem Selected="True">English</asp:ListItem>
        </asp:DropDownList>
    </td>
</tr>
<tr>
    <td><span class="important">*</span>Company:</td>
    <td><asp:TextBox ID="Company" runat="server" width="200px" /></td>
</tr>

When the code appears on the site the <asp:Textbox> control is 205px and the <asp:DropDownList> is 200px wide. What is causing that? They both are set to a width of 200px.

Answer 1

The DropDown is resized regarding the size of the options you provide in it. So, If you have longer options, you will get longer drop down. In addition it takes more place for the arrow that is the right corner.

Answer 2

Because the textbox has 2px of border and 1px of padding on the sides.

Answer 3

When you insert data in the dropdownlist it resizes if you do not set the width property, but if you set the width it will not resize.

Answer 4

Not quite related, but here's a quick tip that will save you a lot of headache down the road:

Never use ASP:Textbox or ASP:DropDownList

<textbox runat=server> and <select runat=server> will work in every single case you could ever need, and they don't add any confusing properties such as "width" that don't quite work right.

Use real HTML tags with CSS classes for everything you do, and only add runat=server to the ones you actually intend to mess with from the backend.