Hello

Restricting the width of inputs is a bit tricky. Most of them has the attribute "size", which restricts the width by the number of chars in the field. In narrow viewports this leads to inputs that rises out of the layout and the viewport. Restricting the width with the simple rule input { width: calc(100% - 6px); } catches also inputs of the type radio and checkbox. So these elements took the rule serious and in consequence the whole width.

So I tried to exclude these types with the selector :not(), but it doesn't take lists of selectors (i.e. input:not([type="checkbox"], [type="radio"])). Thatswhy I needed another solution and found a not very elegant but robust way with a dedicated class, that I named "small-input" (input:not(.small-input) { width: calc(100% - 6px); }).

I gave it to every checkbox, every radio-button and – after a first scary test – to a few text inputs in the settings section. I had to work on the submit buttons also, because they used the full width too. I changed them all from <input type="submit" /> to <button></button>.

An exemplary view from the settings form. I know, it's not very thrilling.

I tend to use HTML5-types for the element input and the new attributes, where it's possible. So the search inputs are now of type="search" and has placeholders via attribute instead via JavaScript.

The packages are available in my repository on github.com. Actually the version 0.0.4 is the newest one.

Disclaimer: At the moment the template named "response-one" is not suitable for productive use. Use it only for testing purposes from your personal settings after the upload!

Tschö, Auge