Grid + Panel Scrollbar Z-index

[aoverton07Participant]

Currently if you have a Grid nested inside of a panel to make use of the scrollbars automatically added by the panel, the grids header is displayed on top of the vertical scrollbar for the panel…..this is very easy to reproduce:

                $("#gridTest").jqxGrid({
			theme: theme,
			width: 500,
			height: 500,
			columns: [
				{ text: 'COL 1', datafield: 'col1' },
				{ text: 'COL 2', datafield: 'col2' },
				{ text: 'COL 3', datafield: 'col3' },
				{ text: 'COL 4', datafield: 'col4' },
				{ text: 'COL 5', datafield: 'col5' },
				{ text: 'COL 6', datafield: 'col6' }
				]
		});
		
		$("#panelTest").jqxPanel({ width: 350, height: 350, theme: theme });
        <div id="panelTest">
            <div id="gridTest"></div>
        </div>

Is it possible for this to be fixed in the next release?

Also if you wanted to use this functionality inside a splitter like so:

$("#gridTest").jqxGrid({
			theme: theme,
			width: 500,
			height: 500,
			columns: [
				{ text: 'COL 1', datafield: 'col1' },
				{ text: 'COL 2', datafield: 'col2' },
				{ text: 'COL 3', datafield: 'col3' },
				{ text: 'COL 4', datafield: 'col4' },
				{ text: 'COL 5', datafield: 'col5' },
				{ text: 'COL 6', datafield: 'col6' }
				]
		});
			
		$("#panelTest").jqxPanel({ width: '100%', height: '100%', theme: theme });
		
		
		$("#testSplitter").jqxSplitter({
			 theme: theme, 
			 width: 400, 
			 height: 400, 
			 panels: [
			 	{ size: '50%' }, 
				{ size: '50%' }
				] 
		});
<div id="testSplitter">
	<div>
        <div id="panelTest">
            <div id="gridTest"></div>
        </div>
   	</div>
    <div>
    	RIGHT SIDE
   	</div>
</div>

The scrollbars for the panel do not appear until you manually resize the splitter. Shouldnt they appear from the start so the user can scroll to see content hidden behind the splitter without having to first manually resize it?

[Peter StoevKeymaster]

Hi aoverton07,

That is a non-issue for us. The Grid’s Width and Height are not set to values that will fit to the Panel.

      $("#gridTest").jqxGrid({
                width: '100%',
                height: '100%',
                columns: [
                    { text: 'COL 1', datafield: 'col1' },
                    { text: 'COL 2', datafield: 'col2' },
                    { text: 'COL 3', datafield: 'col3' },
                    { text: 'COL 4', datafield: 'col4' },
                    { text: 'COL 5', datafield: 'col5' },
                    { text: 'COL 6', datafield: 'col6' }
                ]
            });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[aoverton07Participant]

That is not a sufficient solution. If you set the grid height and width to 100% the grid just gets shrunk to the size of the panel, squeezing all the columns together (you could set the width of the columns to a specific pixel length but that does not account for the height of the grid, and is assuming that the grid is filling the whole div inside the panel), which is not aesthetically pleasing at all, and these are “User Interface Widgets”. The Grid Header should not get drawn above the scroll bar, the scroll bar should always be on top of any content.

And shouldnt the scrollbars for the panel appear on page load, instead of only appearing after you manually resize the splitter? This only happens when the panel is contained inside a splitter.

[Peter StoevKeymaster]

Hi aoverton07,

The Grid’s columns will be squeezed, because you did not set the “width” property. If you set it, they will not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[aoverton07Participant]

Peter,

Yes, I acknowledged that in my previous post. I still think that the scrollbars should be present on page load, without having to resize the splitter and the scrollbars should also have a higher z-index than any content on the page, this seems to be a web standard. I have already implemented a work around for both by calling the ‘collapse’ and ‘expand’ methods consecutively after initializing the splitter (this gets the scrollbars to appear) and I manually set the z-index of the panels vertical scrollbar which can be found by “panelID” + “verticalScrollBar” to 9999. So all in all I’ve got it working the way it should, just wanted to bring it to your attention. thanks for the quick responses!

[Author]

Posts