Padding on fluid input makes element too wide
andreashouben opened this issue · 11 comments
Describe the bug
I created a small page using a form with a fluid input. An example can be seen here:
https://codepen.io/anon/pen/LBOBGP
I expected the fluid input to be as wide as the outer container. But it is wider.
When I remove the 10px padding on each side of the input it fits.
Am I doing something wrong? Or is this a bug?
To Reproduce
See codepen: https://codepen.io/anon/pen/LBOBGP
Expected behavior
Input as wide as outer container.
Screenshots or Project link
https://codepen.io/anon/pen/LBOBGP
Desktop (please complete the following information):
- iOs, Chrome and Firefox
- siimple@3.1.0
Hello @Guysbert . Thanks for your bug report. I have fixed it on input element. Also, I have fixed the same issue on other elements that have the fluid modifier (select and textarea).
Great! When will you publish the next release? :D
I hope that tomorrow will be ready to be published 😄
Please @Guysbert , could you check if the input in the search box of the documentation is displayed well on your device? https://docs.siimple.xyz/getting-started/installation.html
And the fluid input of the documentation? https://docs.siimple.xyz/form/input.html
Yes. The docs page looks great, but I don't have access to your local filesystem :D
Oops, sorry. The correct link is: https://docs.siimple.xyz/form/input.html
Ok, so I don't know why in your codepen it looks wider and in the documentation it fits to it's parent size...
On your documentation page, the browser adds the user agent stylesheet setting box-sizing: border-box;
On the codepen page it does not do that:
After googling the issue it seems that this behaviour is caused, when <!doctype html> is added to the head of your page which is not the case on your documentation page. I guess if you'll add it, the input field will also be too wide in the documentation.
I suggest to add the <!doctype html> tag to your webpage (because it's good style) and then add a box-sizing: border-box to the siimple-input--fluid class.
Confirmed. This is how your page looks when you add the doctype tag:
Perfect, thank you! I have added box-sizing:border-box attribute to input and textarea (it has the same issue).
Closing issue. New version v3.1.1 will be published in few minutes with the fix of this bug. Thank you 😄