Alter the width of single value panel

gokool2u · ‎10-04-2016

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 ?

niketn · ‎07-12-2017

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>

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

mdmaala · ‎03-13-2019

this is effective for me thanks for this!

rjthibod · ‎10-14-2016

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

rjthibod · ‎10-05-2016

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.

gvnd · ‎07-12-2017

Its not working for me..

jhea10 · ‎12-31-2018

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

rjthibod · ‎01-01-2019

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.

Alter the width of single value panel

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life