I've tried to fix the positioning and size of the "Show All" button for a long time now, sadly unsuccessful...
If I use display: block; + float: left, it breaks the help text under the widget and if I use display: block-inline;, then the button size and position is always different, depending on the OS. Also a big space between the label and the textfield is displayed in all browsers.
That seems to be a common problem, since the jquery autocomplete demo seems to have the same problem.
So if any one has an idea to how to fix the button, post it here please. :P
Thanks in advance...

Comments

drclaw’s picture

This is definitely a tricky one. I've just spent some time trying to come up with a css only approach that could work with any theme. It's hard. The problem is that the height of the <input>, if not explicitly set, is defined by line height and padding. This could be anything depending on the theme. I think because of this, there's no real css-only way to fix it. The <span> tag that holds the "Show All" button needs to somehow inherit certain styles from the <input>. You could do it potentially using javascript but then you would have to add the style directly to the element tag...

hass’s picture