Splunk Search

How to reduce the specific column width in a table

spkriyaz
Path Finder

Hi,

I have a panel where it has 5 columns in it. I want to reduce the width of the 4th and 5th column alone and rest of the three columns can be of the default size. 

Could you please help me here whether is there any option to do it in simple xml.

Thanks,

Labels (1)
Tags (1)
0 Karma
1 Solution

niketn
Legend

@spkriyaz if you have used CSS before each DOM element is supposed to have a unique ID. Hope you are not using id as a class which is generic. Also, since it is ID you can have only one. If you already have table id="highlight" and are sure you have no other table with the same ID and do not want similar CSS applied to any other table in the dashboard, you can #tableColumnWidth with #highlight in the CSS override and it should work. No need to change any of your existing XML.

Please try out and confirm. I would recommend going through the Clara-fication Blog to get references for CSS and understanding how to use CSS overrides in Splunk Simple XML Dashboards: https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@spkriyaz try something like the following where table has id="tableColumnWidth".

If you want to understand Simple XML CSS extension better, refer to the following Clara-fication blog by @cmerriman https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...

(PS: The following is demo code hence CSS has been added directly in Simple XML dashboard, you should ideally move this to your App level CSS static file and reference the stylesheet in your dashboard/s for re-usability, app level consistent style and avoiding duplicate/redundant styling).

  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableColumWidth table thead tr th:nth-child(4),
          #tableColumWidth table thead tr th:nth-child(5){
            width: 10% !important;
            overflow-wrap: anywhere !important;
          }          
        </style>
      </html>
      <table id="tableColumWidth">
        ...
        ...
        ...
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

spkriyaz
Path Finder

Hi @niketn ,

Thank you for your help, could you please tell me how to add this table ID to the table which already has another table ID. Basically, i have "highlight" which i use to encircle the row and now I want to add the table ID "tableColumnWidth" to it. Is it possible to have ID's in the same table? I tried to separate with comma like shown below but it throws syntax error

For example:

<panel>
<table id="highlight" , "tableColumnWidth">

0 Karma

niketn
Legend

@spkriyaz if you have used CSS before each DOM element is supposed to have a unique ID. Hope you are not using id as a class which is generic. Also, since it is ID you can have only one. If you already have table id="highlight" and are sure you have no other table with the same ID and do not want similar CSS applied to any other table in the dashboard, you can #tableColumnWidth with #highlight in the CSS override and it should work. No need to change any of your existing XML.

Please try out and confirm. I would recommend going through the Clara-fication Blog to get references for CSS and understanding how to use CSS overrides in Splunk Simple XML Dashboards: https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

spkriyaz
Path Finder

Thank you @niketn it worked well, since my highlight ID was unique so was able use the same ID name for the tablecolumnwidth as well. 🙂

thambisetty
SplunkTrust
SplunkTrust

https://community.splunk.com/t5/Splunk-Search/Column-width/td-p/309644

————————————
If this helps, give a like below.
0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...