Input too high by 2 pixel

[stephanParticipant]

Hi,

I found that the resulting input element, when using “jqxInput”, is always 2 pixel higher than what you specify in the jqxInput initializer. This can be quite annoying when combining a jqxInput with other input elements, like jqxButton, that do not add an extra 2 pixel. I have created a fiddle that demonstrates the problem:

http://jsfiddle.net/_stephan_/FuH67/1/

The fiddle demonstrates the problem for both box-sizing modes, but the visible result is always them same: the input is too high by 2 pixels. If you look at the elements using an inspector you wil observer that both button are sized correctly: their resulting size is exactly 26 pixel. Both inputs are sized incorrectly: their resulting size is 28 pixels.

It is most important to me that elements where I specify the same height actually show up with the same height, otherwise the layout of my dialogs always looks slightly weird. It would also mean that I must apply individual corrections to some jQWidgets controls but not to others. Nevertheless I also feel that jQWidgets should respect the height specified in the initializer, and should not add something which in the end makes the resulting object higher than specified.

Regards,
Stephan

[Peter StoevKeymaster]

Hi,

You do not take into account that there is a Border which is 2px. What we do is to set the CSS property – width or height to the value that users entered though the “width” and “height” properties of the widget. I am sorry that you find the Browser’s built-in rendering to be weird, but that is how it is.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[stephanParticipant]

Hi Peter,

Well my problem is not with the browser built-in “input” but with “jqxInput” where I explicitly specify the desired size in the control initializer call. It would be nice if a library that offers controls would (internally) ensure that a control generated through the library respects the sizes specified at library control creation time. Thats the reason why I am posting this request.

I am well aware that when I deal with HTML markup and CSS directly I am at the mercy of the browser rendering. The very reason for using libraries like jQWidgets is the hope that they improve control handling and rendering.

In other words (and back to the specific topic) if I create two jQWdiget controls giving them both the same size I would expect jQWidgets to (internally) create them in such a way that they show up with the same size.

Regards,
Stephan

[stephanParticipant]

Hi again,

There is one more thing, which is the reason why I included “box-sizing: border-box” in my example. You see I was actully hoping that all you do is apply the “width” to the “input” and let the browser render the rest. If this were true then setting “box-sizing: border-box” would actually give me exactly what I want: an input with the height exactly as specified. Sadly, as the sample fiddle shows, this is not the case. Even for “box-sizing: border-box” I get a size difference between input an button.

I have extended my fiddle example to illustrate my point above:
http://jsfiddle.net/_stephan_/FuH67/3/

The pure HTML controls have identical height for “box-sizing: border-box” despite the border (and default padding). For the jQWidgets controls you can observe that the input has a height of 28px.

I can only assume that somewhere within jQWidgets you do adjust the height given to an input (by adding 2px), instead of applying it directly to the control. Modifying the height is in fact what I originally asked for, just the other way round: remove 2 pixel for normal box sizing and do not modify height for “box-sizing: border-box”

Regards,
Stephan

[Author]

Posts