Splunk Search
Highlighted

Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

Hi All,

I want to display 100 rows results in table per page with vertical scrollbar and fix the header when we move down.
I am trying to use overflow-y: scroll; on div. so it shows vertical scrollbar but it is showing 10 rows per page with header is not fixed.

can any one please help me...
Thanks.

0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

can anyone suggest on this?

0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Legend

@493669, can you please add your current CSS override as to where you have applied overflow-y: scroll;.
Adding a screenshot of what you have vs what you want will also help.




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

alt text

I have applied below js on div:-
div#multiselect {
overflow-y: scroll;
}

0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

Hi @niketnilay,

alt textI have applied below js:-
div#tableid{
overflow-y: scroll;
}

I am not able to add screenshot

0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

alt text

Here on every page of table I want to display 100 records with enabled vertical scrollbar .
and when I scroll down the first row should remain fixed .
Here I am using below js:
div#tableid{
overflow-y: scroll;
}

0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

Hi,
Can any one suggest whether is it possible in Splunk?

0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

can anyone suggest on this?

0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Legend

@493669, I have converted your answer to comment so that this question flags as unanswered for others. I don't think simply changing CSS will get you what you want. Rather it would be an extension to table renderer. I have not been able to get this to work. Will updated if I get a solution before the others.




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: Fix table header and add vertical scrollbar using CSS and JavaScript

Super Champion

thanks @niketnilay
yes with CSS , we need to change js also..

0 Karma