Solved: Re: How to change the width of panels in xml?

auaave · ‎03-26-2018

Hi Guys,

On a row of my dashboard, I have a single value, statistics table and line chart. How can I make the width of the single value to 25%, statistics table to 30% and line chart to 45% of the total width in xml?

Thanks a lot!

niketn · ‎03-26-2018

@auaave, if you can add id to each of your panels you can use CSS override to adjust the panel width. For example <panel id="errorSinglePanel">,<panel id="errorStatsPanel">, <panel id="errorLineChartPanel"> then following CSS should do the trick

<panel depends="$alwaysHideCSS$">
  <html>
    <style>
      #errorSinglePanel{
        width:25% !important;
      }
      #errorStatsPanel{
        width:30% !important;
      }
      #errorLineChartPanel{
        width:45% !important;
      }
    </style>
  </html>
</panel>

Consider the following run any where dashboard example to test out:

Following is Simple XML code:

<form>
  <label>Adjust Width of Panels in Dashboard</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label>Select Time</label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          #errorSinglePanel{
            width:25% !important;
          }
          #errorStatsPanel{
            width:30% !important;
          }
          #errorLineChartPanel{
            width:45% !important;
          }
        </style>
      </html>
    </panel>
    <panel id="errorSinglePanel">
      <title>Splunkd Errors (Single Value)</title>
      <single>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</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="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>
    <panel id="errorStatsPanel">
      <title>Top 5 Error (Stats)</title>
      <table>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| top 5 component showperc=false</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel id="errorLineChartPanel">
      <title>Splunkd Errors (Timechart)</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

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

View solution in original post

maxzintel · ‎01-31-2020

FYI: It looks like this solution does not work on Splunk 7.3.3. Unsure why yet, will update if I figure it out. We had implemented it previously and it worked as expected, now Splunk seems to ignore the css override and equally spaces the panels anyways.

randyc1 · ‎05-04-2020

The solution I found was to make the CSS panel 0% by adding an id on the CSS panel and another entry in the CSS code

<panel depends="$alwaysHideCSS$" id="CSSPanel">
       <html>
         <style>
           #CSSPanel{
             width:0% !important;
           }
           #errorSinglePanel{
             width:25% !important;
           }
           #errorStatsPanel{
             width:30% !important;
           }
           #errorLineChartPanel{
             width:45% !important;
           }
         </style>
       </html>
     </panel>

SpeschLOne · ‎02-17-2020

Hi, maxzintel,

I had the same issue after our update to 7.3.3, and I just found the thread below that points to a workaround. I was able to put the

Martin_Doering · ‎03-03-2020

We also have the same issue with 7.3.3, and have found the following workaround: simply add an empty paragraph in the HTML code before the style tag:

<html>

  <p/>

  <style>

     ...

maxzintel · ‎02-18-2020

@SpeschLOne for some reason I cannot see the end of your comment. However, we found a workaround as well. We had to create a file /opt/splunk/etc/apps/search/appserver/static/{someName}.css. In it we added the custom css required to resize the panels and then referenced that in the form element on line 1 of the XML. After deleting all the ghost panels that aren’t working anymore everything worked as expected.

nagarajsf · ‎10-28-2019

Hi,

I'm trying to achieve same functionality but it throwing some exception like below,

Warning on line 3: Node is not allowed here

and here is the panel

`
test

   <html>
     <style>
       #ticketStatusPanel{
         width:25% !important;
       }
       #countTicketPanel{
         width:75% !important;
       }

     </style>
   </html>

`

sainudaniel · ‎11-08-2018

Is it possible to adjust the height of some panels in same dashboard ?

niketn · ‎03-26-2018

@auaave, if you can add id to each of your panels you can use CSS override to adjust the panel width. For example <panel id="errorSinglePanel">,<panel id="errorStatsPanel">, <panel id="errorLineChartPanel"> then following CSS should do the trick

<panel depends="$alwaysHideCSS$">
  <html>
    <style>
      #errorSinglePanel{
        width:25% !important;
      }
      #errorStatsPanel{
        width:30% !important;
      }
      #errorLineChartPanel{
        width:45% !important;
      }
    </style>
  </html>
</panel>

Consider the following run any where dashboard example to test out:

Following is Simple XML code:

<form>
  <label>Adjust Width of Panels in Dashboard</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label>Select Time</label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          #errorSinglePanel{
            width:25% !important;
          }
          #errorStatsPanel{
            width:30% !important;
          }
          #errorLineChartPanel{
            width:45% !important;
          }
        </style>
      </html>
    </panel>
    <panel id="errorSinglePanel">
      <title>Splunkd Errors (Single Value)</title>
      <single>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</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="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>
    <panel id="errorStatsPanel">
      <title>Top 5 Error (Stats)</title>
      <table>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| top 5 component showperc=false</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel id="errorLineChartPanel">
      <title>Splunkd Errors (Timechart)</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

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

aditi1996verma · ‎04-22-2020

brilliant solution, very helpful

rajaguru27902 · ‎11-20-2019

Thanks. It worked in new version. How to accomplish same in Version 6.0.7

nagarajsf · ‎10-28-2019

Hi,

when I trying to insert CSS panel it throwing below error,

Warning on line 3: Node is not allowed here

and here is the panel

test

<html>
  <style>
    #ticketStatusPanel{
      width:25% !important;
    }
    #countTicketPanel{
      width:75% !important;
    }

  </style>
</html>

jaxjohnny2000 · ‎06-11-2019

Works like a champ! Copy the entire codeset into and replace a test panel. Then work with the hidden panel, one per row. Done! Perfect! Can have different sized for different panels based on the panel. Terrific!

auaave · ‎03-26-2018

Thanks a lot @niketnilay!! This is great! 🙂

kmaron · ‎03-26-2018

Wow. That's awesome.

sainudaniel · ‎11-08-2018

Thank you.That is wonderful.
The same way, is there an option to adjust the height of a panel?

niketn · ‎11-08-2018

@sainudaniel, there are couple of options:

1) Simple XML chart configuration allows option name height for charts (not table).

     <option name="height">400</option>

Using this approach if you increase the height of one panel other panels in the same row will adjust automatically. If you reduce you would need to reduce for all panels in the same row or else remaining will take height of biggest panel in the row. Refer to Splunk Documentation: https://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#General_chart_pr...

2) Use CSS Selector for each panel in the row, you can set height directly. PS: min-height would need to be reduced for panel in case you need to reduce the height.
Here is an example in Trellis Layout for finding CSS selector for override: https://answers.splunk.com/answers/562662/using-trellis-with-simple-xml-extension.html

You would need to find/adjust CSS override as per your need.

Here is an option to change table height using CSS Selector: https://answers.splunk.com/answers/684166/how-to-change-table-height-when-no-results-are-fou-1.html

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

niketn · ‎03-26-2018

@kmaron, yup having an option to override CSS using hidden html panels in Simple XML Dashboard does allow the flexibility of avoiding static file dependency and implies changes would reflect immediately without Splunk Admin dependency and refresh of Splunk environment. 🙂

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

kmaron · ‎03-26-2018

I was always told that the CSS would be overwritten so JavaScript was the only way. This has totally made my day!

kmaron · ‎03-26-2018

Splunk distributes the width evenly automatically and you can't change it using XML. The only way to customize is with a JavaScript file.

This app might help: https://splunkbase.splunk.com/app/1603/

auaave · ‎03-26-2018

thanks kamaron 🙂

How to change the width of panels in xml?

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life