chrome v 32 - html elements size issue - html

Question

After the chrome 32 update, the width of the html elements (input, select,..)
defined by a css with these properties does not work:
position:absolute;
left:10px;
right:20px;
In chrome 31 and all others browsers it works.
Look at this with chrome 32
http://jsfiddle.net/EAkLb/7/

Answer 1

I guess this is what W3C says as the correct way of rendering input elements (I said I guess and I dindn't put the W3C spec link because I didn't found the official link for it)
A simple workarround is to create container div with the position absolute and the left and right attributes and create an input inside with width: 100%;
<div class="container">
<input type="text"/>
</div>
<style type="text/css">
.container {
position:absolute;
left:10px;
right:20px;
}
.container input {
width: 100%;
}
</style>
like in http://jsfiddle.net/pjK8s/1/
If you need to put padding than you need to style the container to looks like the input and let the input be transparent
<div class="container">
<input type="text"/>
</div>
<style type="text/css">
.container {
position:absolute;
left:10px;
right:20px;
padding: 1px 8px;
margin: 2px 0px;
-webkit-appearance: textfield;
}
.container input {
width: 100%;
border: 0px;
margin: 0px;
padding: 0px;
background: transparent;
outline: none;
}
</style>
like in http://jsfiddle.net/Vyj22/1/