Border bottom not aligned with the other text fields
GianlucaGuarini opened this issue · 7 comments
The border bottom of the select fields have 1px less of the default material input fields on firefox and ie.
I have attached the screenshot of the issue
Firefox 46.0a2
IE10
Here you can check a demo of the issue http://codepen.io/GianlucaGuarini/pen/eZOoeO
I have tried many css fixes but I can not figure out how to solve this problem any help is really appreciated
If you set a fixed height on the input and select to be the same, then they will be aligned. On Firefox, setting height: 30px; on the <select class="mdl-selectfield__select"/> element will make them both aligned. Since the material-design-lite doesn't set fixed height, and that the height is different on different navigators, you'll have to set them yourself
Setting the height:30px aligns the select on firefox but it will not be aligned on chrome and safari. I have updated the example http://codepen.io/GianlucaGuarini/pen/eZOoeO Probably you need to set the height dynamically via javascript
Even if you set the height on both the select and input?
try to add box-sizing: border-box; -moz-box-sizing: border-box; on both elements
It didn't work. Maybe it's simply not possible. You can fork my example trying to figure out whether there could be a workaround. I have tried also flexbox but with no success. Thanks anyway
That looks like a bug of Firefox then, because both elements have exactly the same dimensions and attributes, sorry mate