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?

Labels (1)
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!

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...

Splunkbase | Splunk Dashboard Examples App for SimpleXML End of Life

The Splunk Dashboard Examples App for SimpleXML will reach end of support on Dec 19, 2024, after which no new ...

Understanding Generative AI Techniques and Their Application in Cybersecurity

Watch On-Demand Artificial intelligence is the talk of the town nowadays, with industries of all kinds ...