Splunk Search

Fix table header and add vertical scrollbar using CSS and JavaScript

493669
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

niketn
Legend

@493669, The current work around with CSS that I proposed was to fix the Table header while you use Splunk's UI scroll. You obviously noticed the issue with this approach (but this was the quickest change/not the easiest though, that I could think of). So, let me convert to comment again. So that others can pick this up meanwhile if I can spend some time on it with one of the workarounds I proposed.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

493669
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

493669
Super Champion

can anyone suggest on this?

0 Karma

niketn
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.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

493669
Super Champion

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

0 Karma

493669
Super Champion

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

0 Karma

493669
Super Champion

can anyone suggest on this?

0 Karma

niketn
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.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

493669
Super Champion

Hi @niketnilay,

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

I am not able to add screenshot

0 Karma

493669
Super Champion

alt text

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...