topic Re: How to change the width of the column in the classic dashboard's panel? in Dashboards & Visualizations

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

vinoth_raj — Fri, 05 May 2023 10:59:15 GMT

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)'.

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

TrangCIC81 — Fri, 12 May 2023 10:08:24 GMT

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.

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

gcusello — Fri, 12 May 2023 10:18:15 GMT

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

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

vinoth_raj — Fri, 12 May 2023 11:51:51 GMT

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.

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

TrangCIC81 — Mon, 15 May 2023 01:50:59 GMT

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