Search code examples
asp.netdrop-down-menutextboxalignmentcss-tables

Aligning the widths of DropdownList and TextBox in a table

I have a table with 1 column. In this column, there are either rows with a textbox or with a dropdownlist. What I want now is that these controls have the same width. So I set the Width of the controls to 100%. The result however is that the dropdownlists are like 5-10px shorter than the textboxes. I have tried setting: 

Width="100%"

as well as: 

style="width: 100%"

But no success there. In the Visual Studio designer, the width is correct for all controls. But in Firefox, Chrome or even IE, the dropdownlists are shorter.

Suggestions please :)

Solution

  • I've seen this work using box-sizing:

    input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

    JS Fiddle Demo