Solved: How can I add spaces between panels in dashboard?

Julieda · ‎01-26-2016

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!

renjith_nair · ‎01-26-2016

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

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

---
What goes around comes around. If it helps, hit it with Karma 🙂

View solution in original post

Nextbeat · ‎03-26-2018

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

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>

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:

This is what it looks like afterwards:

mtulett_splunk · ‎11-21-2017

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:

jinnypt · ‎10-25-2017

I want to know how make empty space between panels.

Some body help this question!

niketn · ‎10-25-2017

@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!!!"

renjith_nair · ‎01-26-2016

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

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

---
What goes around comes around. If it helps, hit it with Karma 🙂

Julieda · ‎01-26-2016

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! 🙂

tamduong16 · ‎11-21-2017

Thanks for the idea. I use

How can I add spaces between panels in dashboard?

Join Us for Splunk University and Get Your Bootcamp Game On!

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

Announcing Scheduled Export GA for Dashboard Studio