Dashboards & Visualizations

How can I add spaces between panels in dashboard?

Explorer

Hi!

I am wondering how I can add space between panels in my dashboard for easier distinction between the panels? I am using a borderline defined in application.css, but I want an additional spacing as well.

Thanks!

0 Karma
1 Solution

SplunkTrust
SplunkTrust

Try adding a dummy HTML panel in between the panels as a workaround

  <row>
    <panel>
      <html>
      <u1> </u1>
    </html>
    </panel>
  </row>

View solution in original post

Path Finder

You can try adding white space by modifying the XML code.

  1. Create panel IDs for identification purposes.

    <form>
      <row>
        **<panel id="id_one">**
          <chart>
            <search>
              <query></query>
            </search>
            <option name=""></option>
          </chart>
        </panel>
      </row>
      <row>
        **<panel id="id_two">**
          <chart>
            <search>
              <query></query>
            </search>
            <option name=""></option>
          </chart>
        </panel>
      </row>
    
  2. Create a new HTML panel which will hold code for the spacing by going to Edit>Edit Source>XML. Note The token hiddenForCSS is used to hide the styling panel. Use the ID for a panel you want to add white space. Padding-bottom will be used to space out the panels by 10 pixels. Note !important is used to override the default setting.

      <row>
        <panel>
          **<html depends="$hiddenForCSS$">**
          <style>
            **#id_one .panel-body {
            padding-bottom: 10px !important;
            }**
          </style>
         </html>
        </panel>
      </row>
    </form>
    

This is what it looks like before:
alt text
This is what it looks like afterwards:
alt text

0 Karma

Splunk Employee
Splunk Employee

You can use html tags with <br> to add whitespace between panels, like below. You can use as few or as many <br> tags as required to increase or decrease the whitespace. *Edit - there's a formatting problem, it should all be <br> and </br> tags, but it's not displaying properly.

<row>
  <html>
    <br>&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;</br></br></br></br>
  </html>
</row>

Which looks like this:

Whitespace Example using <br> tags

Explorer

I want to know how make empty space between panels.

Some body help this question!

0 Karma

SplunkTrust
SplunkTrust

@jinnypt, can you add a mock screenshot of how you want your dashboard to appear? Is it required between panels stacked horizontally next to each other or between panels stacked in rows i.e. one below other?

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

SplunkTrust
SplunkTrust

Try adding a dummy HTML panel in between the panels as a workaround

  <row>
    <panel>
      <html>
      <u1> </u1>
    </html>
    </panel>
  </row>

View solution in original post

Explorer

That would work, but I would prefer not add another empty panel in between each panel. So if you know another trick, let me know! 🙂

0 Karma

Contributor

Thanks for the idea. I use

0 Karma