jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › panel confuses pixel with percent ?
This topic contains 2 replies, has 2 voices, and was last updated by stephan 11 years, 6 months ago.
-
Author
-
Hi,
If I define a div with 4 pixel padding, and convert that div into a jqxPanel where I specify “100%” for width and height, I actually end up with a panel that has “110%” in width and height.
I have created a fiddle that demonstrates the problem:
http://jsfiddle.net/_stephan_/MezzS/7/It looks like jQWidgets adds 10 pixel (4px padding plus 1px border times 2) to the 100 percent and defines the result as percent.
In fact what I do not understand is that jQWidgets adds anything at all. When using “box-sizing: border-box” it is actually my intent to see padding and border be applied to the inside of a control, but not to see it get added to the outside (even with correct math). As a sidenote: I found this to be particularely troublesome with input controls where I specify a desired size in pixel. jQWidgets takes this size that I specify and adds something to it, even though I am using “box-sizing: border-box” (in the apparently vain attempt to prevent jQWidgets from modifying the size).
NOTE: Yes, I am aware that I already posted something similar in a different jQwidgets forum. I found out only today that the same type of problem applies also to jqxPanel. Also I never got a reply and tracked down problems with input control sizes to the same issue.
Regards,
StephanHi Stephan,
For setting width and height, we use the jQuery’s width and height methods and we pass the width and height properties which you set when you initialize a widget to these methods. And Yes, width and height methods of jQuery take into account the box-sizing settings, padding, margins and borders.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
And you do not consider it stranget that an 8 PIXEL padding&border results in 8 PERCENT getting added to the 100% width ? Mathematically speaking that … unusual.
Buts thats now besides the point, as I have totally given up on “box-sizing: border-box”. The very idea of that concept is that width and height do NOT get modified, and jQWidgets behaves different (while pure HTML in all browsers handles it correctly). Thus I’m now back to default “box-sizing”, because the very reason why I introduced “box-sizing: border-box” in the first place does not work qith jQWidgets.
Just as an explanation and sidenotes: what really troubles me is that jQWidgets does not honor the sizes that I specify. For the purpose of creating a good dialog layout this is extremely anoying and difficult to correct or work around. For SOME jQWidget controls when I specify 80 pixel width I get a control with 80 pixel width, whilefor some OTHER jQWidget controls when I specify 80 pixel width I get a control that has 82 pixel width. A difference that can actually be seen and also a difference that in the case of for instacne jqxPanel results in browser scrollbars where I absolutely do not want or need them.
You might argue that this is very similar to how HTML gets rendered by browsers, but OTOH that why I (attempt) to use a library: so that the library can work around such shortcomings of browser or HTML or CSS rendering. From a GUI controls library I simply expect that when I specify a width and height I actually get a control with exactly the specified width and height, but not with an unknown amount of extra pixels added SOEMTIMES to SOME of the controls.
The current behavior of jQWidgets makes it particularely difficult to use 100% for width and/or height, and jqxPanel is a good example for this difficulty. I wrap my GUI in a jqxPanel and set width and height to 100%, because I want it to fit neatly in the container provided by the application that uses the GUI. Yet what I get instead is a jqxPanel that is 100% PLUS 2 pixels in width and height. An annoying extra that I now must find a workaround fo:
* There is no place in jQWidgets where I can query the amount of extra pixels, thus I must hardcode the ‘2’ as an empirically determined value into my application (if you ever change this to e.g. 4 my code shall break)
* the only way (known to me) to correctly work around the problem of 2 extra pixels on a container with percentage width is to wrap the container in an additional div with absolute position and with a 1px distance to all 4 sides (I tried using “overflow:hidden” instead, but this will cut of half the border of the jqxPanel)The above workaround is required for all jqxPanel I use, and it looks like I’ll have to useit in some other places as well (jqxTabs appear to cause similar trouble). For all input controls I’ll have to SOMETIMES (!) hard code a “desiredWidth -2” depending on the type of the input control (eg. jqxInput requires it, but jqxButtons doesnt).
Ok, final words: this is the last time that I’ll compain about the issue explained above, I promise 🙂 We’ve discussed it back and forth and I’m just trying to explain why the issue causes me so much trouble (and extra coding effort).
Regards,
Stephan -
AuthorPosts
You must be logged in to reply to this topic.