Grid relative width issue

[pedrolsamaralParticipant]

Hi,

I’m trying to create a grid inside a div with 50% width that is inside another div with 100% width. The grid has 100% width. Something like this:

<div style=”width: 100.0%;clear:both;overflow:hidden;”>
<div style=”width: 50.0%;float:left;”>
<grid>
</div>
</div>

Every page refresh gets a non-deterministic behavior on the grid div elements after the data gets bound. Example: main grid div has 922px of width but the calculated value for the pager div is 928px (with this the right paging arrow gets out of the grid border).

Also the div that contains the loading element gets affected with 100% width and that will be 100% of the top div. With this the loading element gets centered on the top div instead of the grid div.

Is there anything that I can do to avoid/work-around this ?

[Peter StoevKeymaster]

Hi pedrolsamaral,

To learn how to use jqxGrid with Fluid width, take a look at its fluid size demo or any of the demos in the mobile demos section.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[pedrolsamaralParticipant]

It seems that setting the body CSS like you’re setting in the demo fixed one of the issues (the pager buttons is no longer getting out of bounds).
The loading issue still remains, I managed to reproduce it by creating a fiddle based on your demo, adapting it to the HTML presented in my previous post: http://jsfiddle.net/jfpqsf33/1/

[pedrolsamaralParticipant]

Also the CSS that is used on the fluid demo page only hides the real problem. Since I cannot have an overflow: hidden on the HTML body, I removed it and it started happening again. It happens only when the page has a vertical scrollbar (maybe that’s messing up with the divs width calculations?), I cannot reproduce it on JSFiddle though.

[Peter StoevKeymaster]

Hi pedrolsamaral,

I would suggest you to read about the CSS Box Model and how it works: http://www.w3schools.com/css/css_boxmodel.asp. There is no issue with our widget. When you set the width in percentages, you set the Grid DIV Element’s width. However, the border, unless you don’t remove it adds additional 2px to the overall size. You can easily resolve your layout problem in several different ways like – removing the border or putting the Grid within a container DIV tag which does not have border or just look at how we do this in our demos which are many and are all online.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[pedrolsamaralParticipant]

None of the divs have borders so I would think that is not the issue here, additionaly the issue only happens when the page is long enough to have a vertical scroll.

Also it seems to me that the loading element issue (shown on the JSFiddle) doesn’t have to do with DIV borders. For this case none of your demos apply because they aren’t on a div with a smaller width. What is happening is that the div that contains the loading element is marked with “position: absolute” and that will position that div relative to the first not static element, the div that contains the 45% width cannot be static so I cannot position the loading element correctly.

[pedrolsamaralParticipant]

Reminder

[Peter StoevKeymaster]

Hi pedrolsamaral,

The issue is not in the Grid’s size. The issue is the “showloadelement” method for this specific scenario.

Regards,
Peter

[pedrolsamaralParticipant]

It’s both. The problem only happens if you specify a relative width.
Anyway is there any solution for this ?

[Peter StoevKeymaster]

Hi pedrolsamaral,

To be more specific, showloadelement does not set the load element’s size. That is the issue here. You’d probably need to either use a container element with different “position” setting or use a custom loading element.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[pedrolsamaralParticipant]

If a commercial license was bought could those kind of issues be fixed or would we still have to work-around them ?

[Peter StoevKeymaster]

Hi pedrolsamaral,

Issues are fixed in new versions and are fixed for everybody i.e for users with commercial and non-commercial usage.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[pedrolsamaralParticipant]

So is there a clear planning of fixes that could secure our development if we bought your solution ?

[Author]

Posts