jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by reblutus 11 years, 8 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Another issue with the horizontal scrollbar Posts
October 2, 2013 at 3:01 pm Another issue with the horizontal scrollbar #30058

reblutus
Blocked

If you have a grid that the columns are larger than the grid container, an horizontal scrollbar appears which is ok.

Now if that grid has height:”100%”, the grid will be redrawn to take as much space as possible in height, but unfortunately, the grid doesn’t take into account the height of the horizontal scrollbar so the grid is 100% + 15px. That makes appears a vertical scrollbar in the browser window, which is bad in two ways:

– the user needs to scroll the browser window to be able to scroll horizontally the grid.
– the appearance of the browser window vertical scrollbar triggers another redraw of the grid, which sometimes triggers unnecessary ajax calls , cellsrenderer and so on.

The grid should take into account the height of the horizontal scrollbar when it is visible to calculate the height the grid must be.

October 2, 2013 at 3:46 pm Another issue with the horizontal scrollbar #30068

Peter Stoev
Keymaster

Hi reblutus,

The Grid according to us works correctly with percentage height and width. We also have multiple online demos which prove that. The Grid is a DIV tag with CSS settings set as they should be. We do not confirm the reported behavior in this topic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 2, 2013 at 3:59 pm Another issue with the horizontal scrollbar #30072

reblutus
Blocked

Please provide me with an example with a grid that takes 100% in height of the page and with columns that are large enough so the horizontal scrollbar appears.

I haven’t found any examples in your demos that the grid takes the full height of the page.

October 2, 2013 at 4:11 pm Another issue with the horizontal scrollbar #30073

Peter Stoev
Keymaster

Hi reblutus,

A sample with Grid set to 100% width and 100% height:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/integration-with-jqxgrid.htm?arctic

Another sample where the Grid is with fluid size:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm

All of the mobile demos of the Grid are with percentage size.

As you may look, the Grid’s DIV tag’s CSS width and height are set in percentages, too i.e the properties are synchronized with the CSS. I would suggest you to look for the issue somewhere else in your page elements Layout, because the issue is not in the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 2, 2013 at 7:24 pm Another issue with the horizontal scrollbar #30089
reblutus
Blocked
Thank’s for help on this. As I continue to work on this I took your example:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm

Then open the console and typed:
```
$("html, body").css({overflow:"auto", margin:0, padding:0});
```
This is to remove the overflow:hidden style that prevent scrollbar to appear when needed and to reset the default margins and paddings.

Then I typed:
```
$("#jqxgrid").jqxGrid({height:"100%"});
```
You will see a vertical scrollbar appear. Note that the grid does not have an horizontal scrollbar and doesn’t seems to be the source of the problem.
October 2, 2013 at 7:29 pm Another issue with the horizontal scrollbar #30091
Peter Stoev
Keymaster
Hi reblutus,

That is a normal behavior that every DIV tag with Border and the default box-sizing will have.

Simple example:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body, html {
            height: 100%; width: 100%;
            padding: 0; margin: 0;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid yellow; background: blue; height: 100%; width: 100%;">
     </div>       
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
October 2, 2013 at 7:35 pm Another issue with the horizontal scrollbar #30092
reblutus
Blocked
You are right. If I add:
```
$("*").css({"box-sizing": "border-box"})
```
Then the scrollbar disapears. the problem is indeed elsewhere.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.