Scrollbar under fixed column in jquery datatable - javascript

Hi guys I am getting scroll bar under fixed column when hovering on that particular column which is fixed in the jquery datatable. I am attaching the image for the same, the scroll bar which I am mentioning is under the first column that is fixed. Please, if any one can come up with the solution it would be helpful.

Related

Horizontal and vertical scrolling issue in a custom react data table component

I have developed a custom react data table component which displays headersData, rowData and footerData in the table dynamically.
When it comes to the scrolling I am trying to achieve the below 2 points:
Horizontal scrolling -
A) First two columns should be fixed and from third column till the last column, horizontal scrolling should be enabled.
B) Horizontal scrolling should always be visible at the bottom of the window. There is a max-height of 300px and it should
be always visible at the bottom.
Vertical scrolling -
The header row should be fixed at the top when we are scrolling vertically.
The custom react data table and my attempt is there in the below CodeSandBox link. I have achieved the first point mentioned in Horizontal scrolling but could not achieve the second point mentioned in the horizontal scrolling and the vertical scrolling with the fixed header at the top. Tried for many days and couldn't figure out. For this reason, thought of seeking help and posted the question here. Kindly let me know your thoughts on how we can implement this feature. Thanks in advance.
CodeSandBox link:
https://codesandbox.io/s/custom-react-data-table-970ed?file=/src/tableContainer/DataTableContainer.tsx
Note: It doesn't need to support in IE.
Expecting the scrolling behavior to be like shown in the below link:
https://jsfiddle.net/6qxcaemu/5

Table header fixing

I have made table which have some multiple feature like:
sortable
check and uncheck all
resizable column
table header which is fixed on the top
for scrollbar I am using mCustomScrollbar
Now what I want when I am using mCustomScrollbar it’s working nice but the problem is that. My table header is fixed when I am scrolling vertically its fine. But when I scroll horizontally the table header not sliding according to that. Please help me out of this I want fix the table header when I scroll vertically and when I scroll horizontally it should slide.
here is the example made by me:
https://cloud.csdcsystems.com/ui-prototype/html/approved-html/table/table-sorting.html

Prevent position:absolute from taking content out of the flow of a vertical scrollbar

The issue is illustrated in the first column of this JSFiddle.
Basically, I want to make a first column in a table that stays fixed when scrolling horizontally, but not vertically. I found a solution here, but this only works when there isn't a vertical scrollbar. With that included, the first column leaves the flow of the containing div and the scroll bar doesn't apply to it.
How do I get around this? Is there a way to do this without position:fixed or position:absolute? I had the idea of hiding the portion of the first column that flows out of the scrollbar, but I'm not sure how this is implemented.

sync vertical scroll bar of jqgrid with other div vertical scroll bar

I am new in jqgrid. I want to sync the vertical scroll bar of jqgrid with other div vertical scroll. i tried more example but no one being helpful.
So, please provide me appropriate solution as soon as possible
Thanks in advance

Scrolling jumps when clicking jqGrid cell

I have a jqGrid setup that is rather wide, so it the horizontal scrollbar is visible.
Problem is, when scrolling to the right and clicking on a cell, the scrollbar jumps all the way back to the left.
Any ideas why this is happening and how I can prevent it?
I have the same issue with jqGrid4.1.2
After tried so many ways, I found the solution
After making the grid, please do the following things:
Call GridNav function of jqGrid
jQuery('#id').jqGrid('GridNav');
Then add postion of gridId_kn element's parent attribute : position:fixed
set if position is not added already
jQuery('#id_kn').parent().attr("style", style+"position:fixed");

Categories

Resources