Dashboards & Visualizations

Simple XML <style> column width not being applied once table has additional columns added

_guy
Explorer

Hi there,

I have a <html> <style> block defined for a table in my dashboard. It is defining a custom column width.

It works when I only have a limited number of columns in my table (See "Table 1" in the example dashboard code below)

However when I add additional columns it stops working (see "Table 2"). 

I have searched high and low for a solution to this with no luck. Anyone got any ideas?

Here is an example dashboard that demonstrates the issue - the cveID column is the focus.

 

<form version="1.1" theme="dark" hideFilters="true">
  <label>custom table column width not working</label>
  <row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
        <style>
          #customWidth1 th[data-sort-key=cveID] {
              width: 50%  !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="customWidth1">
        <title>Table 1</title>
        <search>
          <query>
            | makeresults 
            | table _time Hostname instance_id Remediation Description Severity ExploitStatus DaysOpen OldestCVEDays cveID</query>
        </search>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
        <style>
          #customWidth2 th[data-sort-key=cveID] {
              width: 50%  !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="customWidth2">
        <title>Table 2</title>
        <search>
          <query>
            | makeresults 
            | table _time Hostname instance_id Remediation Description Severity ExploitStatus DaysOpen OldestCVEDays OpenVulnCount DetectionLogic VendorRef VendorAdvisory Link cveID OldestCVEDate Application Version OldestCVEDate Application Version FirstSeen InstanceName amiName amiID awsOwner awsApplication Account_id AccountName DNSDomain OS IPAddress Team OU Site Environment Location OSGroup OSType</query>
        </search>
      </table>
    </panel>
  </row>
</form>

 

 

Labels (1)
0 Karma
1 Solution

_guy
Explorer

Understood, but I am getting the same squeezing of the column width even when there is a significant amount of data in the cveID field (e.g. 100+ CVE IDs). 

I get the same behaviour if I define the style using px instead of %, and also using td as well/instead of th elements.

I found a workaround - padding out the field name using em space characters 👍

(note I didn't need 50% col width, that was just for the sake of demonstration)

Thanks for the quick response - I take it there is no way to force the style to be applied, overriding the default table rendering behaviour?

 

View solution in original post

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Table rendering will attempt to display as much data as it can so blank spaces will get squeezed to allow more columns to be shown, even if the width is set to 50%.

_guy
Explorer

Understood, but I am getting the same squeezing of the column width even when there is a significant amount of data in the cveID field (e.g. 100+ CVE IDs). 

I get the same behaviour if I define the style using px instead of %, and also using td as well/instead of th elements.

I found a workaround - padding out the field name using em space characters 👍

(note I didn't need 50% col width, that was just for the sake of demonstration)

Thanks for the quick response - I take it there is no way to force the style to be applied, overriding the default table rendering behaviour?

 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

I haven't found a way (yet!) - I suspect that it isn't a Splunk issue, more of a browser / HTML rendering issue. I have even tried wide data which is hidden (display = none). Your solution with non-breaking spaces is a good one.

0 Karma

_guy
Explorer

Cool.

Does my workaround qualify on here as a solution do you think? Temped to mark it as such, but don't want to stray from accepted practice, given I'd be rating my own advice 😂

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

I think it is reasonable to mark your workaround as the solution.

0 Karma
Get Updates on the Splunk Community!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...