Dashboards & Visualizations

How to change the width of the column in the classic dashboard's panel?

vinoth_raj
Path Finder

Hi folks,

My use case is to change the width of the column in the classic dashboard's panel.
I tried the below configuration in xml. But this method only works for up to four columns. Not working as expected for 13 columns where I want only the first four columns to be viewed without scrolling right.

Any ideas?

 

 

 

      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableColumWidth table thead tr th:nth-child(1){
            width: 80% !important;
            overflow-wrap: anywhere !important;
          }          
        </style>
      </html>
      <table id="tableColumWidth">

 

 

Note:

I also tried including more '#tableColumWidth table thead tr th:nth-child(n)'.

 

 

Labels (1)
0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @vinoth_raj,

in the Splunk Dashboard Examples app (https://splunkbase.splunk.com/app/1603) there's the solution to your problem using JS and CSS.

Ciao.

Giuseppe

0 Karma

TrangCIC81
Communicator

Can you try this and see how it works? (Add the CSS code to the html tag section in the dashboard code)

 

 <html>
    <style>
/* Add the below CSS code*/
#tableColumWidth table {
  table-layout: fixed;
  width: 100%;
}

#tableColumWidth table td, 
#tableColumWidth table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tableColumWidth table th:nth-child(1),
#tableColumWidth table td:nth-child(1),
#tableColumWidth table th:nth-child(2),
#tableColumWidth table td:nth-child(2),
#tableColumWidth table th:nth-child(3),
#tableColumWidth table td:nth-child(3),
#tableColumWidth table th:nth-child(4),
#tableColumWidth table td:nth-child(4) {
  width: 25%;
}

#tableColumWidth table th:nth-child(n+5),
#tableColumWidth table td:nth-child(n+5) {
  width: 5%;
}
    </style>
  </html>

 

This sets a fixed width of 25% for the first four columns using the nth-child selector, and sets a percentage width of 5% for the remaining columns. You can adjust the width percentage to suit your needs.

0 Karma

vinoth_raj
Path Finder

Hi,
Thanks for the reply. Sorry, let be a little clearer, my use case is to show only the four columns in the table. The rest of the columns should appear while I scroll rightwards. As of now, the solution provided produces a result similar to the below screenshot.

 

vinoth_raj_1-1683892257695.png

 

 

Tags (1)
0 Karma

TrangCIC81
Communicator

 

      #tableColumWidth table th:nth-child(n+5),
      #tableColumWidth table td:nth-child(n+5) {
        display: none;
      }
 
   #tableColumWidth table th:last-child,
      #tableColumWidth table td:last-child {
        overflow-x: auto;
        width: auto !important;
      }
    </style>
  </html>

 

Can you replace it with the above? 
This should hide all columns after the fourth column, and set a fixed width of 25% to the first four columns. The last column will have overflow-x set to auto to allow horizontal scrolling when necessary, and the width is set to auto !important to override the 25% width set earlier. This should allow the first four columns to be visible without scrolling horizontally, and allow the remaining columns to be accessed by scrolling horizontally.

0 Karma
Get Updates on the Splunk Community!

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability As businesses scale ...