Splunk Search

How do I add Vertical headers in dashboards?

marios_kstone
Path Finder

I am trying to override the standard CSS to format table header in order to rotate the text by 90 degrees. I need this on some numeric tables with a lot of columns. Unfortunately just adding "transform: rotate(90deg);" to the "th" CSS does not seem to be enough as the header is rotated but the column width is preserved. Anyone successfully managed to achieve this?

0 Karma

gmorris_splunk
Splunk Employee
Splunk Employee

Anyone still looking at doing this try:

#PivotView .table th
{
writing-mode: vertical-rl;
transform: rotate(0deg);
}

#PivotView .table th:nth-child(1)   ### This puts first column to horizontal ###
{
writing-mode: horizontal-tb;
font-size:20px !important;
}

0 Karma

jincy_18
Path Finder

Hi,
Have you tried using width and height attributes in the css. It should do the trick for you. Do the same for td elements if required.

th
{
     width: 50px !important;
     height: 30px !important;
    transform: rotate(90deg);
}
0 Karma

marios_kstone
Path Finder

Yes, I tried. The header is rotated but the columns width does not change. Also, the header overlaps other stuff on page... very weird

0 Karma

jincy_18
Path Finder

Hi Marios, Could share a screenshot, for understanding this better? cause I was able to fix this issue with width and height parameters in th/td and it worked for me.

0 Karma
Get Updates on the Splunk Community!

Now Playing: Splunk Education Summer Learning Premieres

It’s premiere season, and Splunk Education is rolling out new releases you won’t want to miss. Whether you’re ...

The Visibility Gap: Hybrid Networks and IT Services

The most forward thinking enterprises among us see their network as much more than infrastructure – it's their ...

Get Operational Insights Quickly with Natural Language on the Splunk Platform

In today’s fast-paced digital world, turning data into actionable insights is essential for success. With ...