topic Re: Vertical headers in dashboards in Splunk Search

How do I add Vertical headers in dashboards?

marios_kstone — Wed, 13 Jul 2022 12:29:48 GMT

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?

Re: Vertical headers in dashboards

jincy_18 — Mon, 26 Feb 2018 13:14:45 GMT

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);
}

Re: Vertical headers in dashboards

marios_kstone — Mon, 26 Feb 2018 13:46:56 GMT

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

Re: Vertical headers in dashboards

jincy_18 — Wed, 28 Feb 2018 05:46:09 GMT

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.

Re: Vertical headers in dashboards

gmorris_splunk — Wed, 13 Jul 2022 12:26:05 GMT

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;
}