Grid header overlapping

[dan123Participant]

Hi i created a example to try to make the grid’s header to be fixed while doing browser scrolling. But issue i am facing is that whenever i have the horizontal scrollbar of the grid enabled, the grid’s header is overflowing to the right of the page. The grid headers should actually become hidden and they should become visible has you scroll to the right.

Example based on jsfiddle
The Quantity column as you can see the its overflowing to the right, is there anyway to make those columns hidden only until you use the horizontal scroll.

here is my jsfiddle:
http://jsfiddle.net/dngc18vo/7/

• This topic was modified 3 years, 5 months ago by  dan123.

[Peter StoevKeymaster]

Hi dan123,

This CSS breaks the things:

.jqx-grid-header{
  position: fixed !important;
  z-index: 10000;
  visibility: block;
  top: 0px !important;
}

#columntablejqxgrid{
  height: 40px !important;  
}

#contentjqxgrid > div.jqx-widget-header{
 height: 75px !important;
}

#contentjqxgrid:nth-child(1n+3){
 position: relative !important;
 top: 70px !important;
 margin-top: 0px !important;
}

If you would like to have a fixed header in the Grid, just do not set the autoheight property to true.

Regards,
Peter

[Author]

Posts