I have this page with 1st row having 2 text boxes and 2nd row having a text box. I want to make their width same, the below code works fine in chrome, but in firefox and IE (tested in IE9) width are different. How can I make the width same in all browsers?
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br>
<input type="text" name="cpono"/>
</form>
</body>
</html>
Chrome
Firefox
You can use box-sizing: border-box; to make alignment of input widths easier cross browser (it takes into account the padding, border, and content widths). It also makes calculations of widths in a pre-processor like Sass really simple.
input[type="text"] {
box-sizing: border-box;
}
input[name="cnop"] {
width: 33px;
}
input[name="cno"] {
width: 122px;
}
input[name="cpono"] {
width: 155px;
}
Check the fiddle: https://jsfiddle.net/mshtacea/
You can assign a width to all the 3 input tag, it is sufficient that the sum of the first two is equal to the value of the third. You must also reset the browser's input default styles.
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" style="width:30px;border:0;margin:0;padding:0"/><input type="text" name="cno" style="width:122px;border:0;margin:0;padding:0"/><br>
<input type="text" name="cpono" style="width:152px;border:0;margin:0;padding:0"/>
</form>
</body>
</html>
If you use the box-sizing attribute, set a fixed width on your form and percentage widths on your form inputs, everything should align nicely.
<form style="width: 200px;">
<input type="text" name="cnop" size="2" style="width: 25%;box-sizing: border-box;"><input type="text" name="cno" style="width: 75%;box-sizing: border-box;"><br>
<input type="text" name="cpono" style="width: 100%;box-sizing: border-box;">
</form>Obviously it's best to put these style attributes into a style tag or your stylesheet but this is a cut and dry example of the solution.
You are better off using CSS to format your controls.
<form>
<div class="container">
<input type="text" name="cnop" class="input1"/>
<input type="text" name="cno" class="input2"/>
</div>
<div class="container">
<input type="text" name="cpono"/>
</div>
</form>
In a style sheet, add these classes
div.container {
display: block;
width: 200px; /* or whatever overall width you need */
}
div.container input {
width: 100%;
}
div.container .input1 {
width: 30px; /* or whatever width or percentage you need */
}
div.container .input2 {
width: 170px; /* or whatever width or percentage you need */
}
