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

niketnilay
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

niketnilay
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 @niketnilay ,

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

niketnilay
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

spkriyaz
Path Finder

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

thambisetty
Super Champion

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

————————————
If this helps, give a like below.
0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!