topic Re: Alter the width of single value panel in Splunk Search

Alter the width of single value panel

gokool2u — Wed, 05 Oct 2016 05:30:49 GMT

How to resize the width of single value dashboard panels in case if I have only one column in a row, instead of making it to occupy 100% width which is default ?

Re: Alter the width of single value panel

rjthibod — Wed, 05 Oct 2016 10:42:52 GMT

You have to edit the CSS for the panel in the dashboard. Splunk does not provide any mechanism to set the width of a panel via SimpleXML. In fact, the Splunk Web framework tries really hard to set the panels widths so that all of the panels on a row are the same width, and it wants the row to occupy the screen.

In your dashboard, give each panel element an id, e.g., <panel id="panel_value_1">. In a custom CSS file for this dashboard, you would than do the following to set the width to 300 px:

#panel_value_1 {
  width: 300px !important;
}

Now, there is a mechanism others have come up with to use a custom JS script to set the width of panels by using a template ID for the panel. A link with the details is here: https://answers.splunk.com/answers/180028/how-to-change-the-width-of-two-dashboard-panels-in.html. The one caveat is this approach will only work for a static panel that does not toggle the visibility of the panels in any way. If you ever toggle the visibility of the panel, you will lose the custom width set by the script. In those cases, you have to use CSS settings like the one above.

Re: Alter the width of single value panel

rjthibod — Fri, 14 Oct 2016 15:00:18 GMT

@gokool2u, did my answer down below help you? If so, please accept it. If not, please clarify any problems.

Re: Alter the width of single value panel

gvnd — Wed, 12 Jul 2017 09:02:09 GMT

Its not working for me..

Re: Alter the width of single value panel

niketn — Wed, 12 Jul 2017 09:48:39 GMT

Following is a run anywhere search based on Splunk's _internal database. In line with @rjthibod, it is setting the width of Panel containing Single value with id="singleValuePanel" to 20% instead of 100%

        <style>
          #singleValuePanel{
            width: 20% !important;
          }
        </style>

PS: <html depends="$hiddenForCSS$"> has been added to always hide the HTML panel.

  <row>
    <panel id="singleValuePanel">
      <html depends="$hiddenForCSS$">
        <style>
          #singleValuePanel{
            width: 20% !important;
          }
        </style>
      </html>
      <single>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">inverse</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>

Re: Alter the width of single value panel

jhea10 — Tue, 01 Jan 2019 00:22:07 GMT

I am running 7.2.1 and this is not working for me neither.

Re: Alter the width of single value panel

rjthibod — Tue, 01 Jan 2019 14:19:15 GMT

Splunk has decided to rework most of the JS / CSS setup in Splunk 7.2, and they broke both of the answers above in the process.

Based on my cursory glance at things in 7.2 (which is a brief glance since I don't use Splunk often these days), my guess is you will have to make the CSS adjustment in JS.

Look at the Splunk Dashboards Examples app (https://splunkbase.splunk.com/app/1603/). Open the source files and look at the dashboard custom_layout_width.xml and its accompanying JS file custom_layout_width.js. That serves as a simple example of how to adjust the width of panels.

The gist is you have to find the dashboard-cell element that belongs to your panel, and then set the width setting for it.

Re: Alter the width of single value panel

mdmaala — Thu, 14 Mar 2019 05:59:44 GMT

this is effective for me thanks for this!