jQWidgets Forums
Forum Replies Created
-
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,
StephanHi 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,
StephanHi mullai,
>> the grid should group the filtered rows and highlight the corresponding rows
>> and unmatched rows should be seen below the filtered rowsSorry, but that is something I do no know how to do. After all I am also just a user of jQWidgets
Maybe Peter can help you better.As a SIDENOTEand tip for you (this will not solve your highlighting problem though): I have seen in your code that you do not assign “datafield” names to your columns. Earlier on I had problems with sorting when using source type “array” and this was caused by not having defined “datafield” names. This might also have an effect on filtering.
In this posting here you will find my question and also the solution:
http://www.jqwidgets.com/community/topic/problems-with-data-source-type-array/In particular look for the last reply from Peter which gives a good code example. I ahve also created a working example that applies correctly the “datafields” property to the “source” object:
http://jsfiddle.net/_stephan_/t7G9Z/1/Regards,
Stephan