topic Re: How can I add spaces between panels in dashboard? in Dashboards & Visualizations

How can I add spaces between panels in dashboard?

Julieda — Tue, 26 Jan 2016 08:53:26 GMT

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!

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

renjith_nair — Tue, 26 Jan 2016 09:10:29 GMT

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

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

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

Julieda — Tue, 26 Jan 2016 10:43:19 GMT

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

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

jinnypt — Thu, 26 Oct 2017 05:54:31 GMT

I want to know how make empty space between panels.

Some body help this question!

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

niketn — Thu, 26 Oct 2017 06:54:30 GMT

@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?

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

tamduong16 — Tue, 21 Nov 2017 23:59:05 GMT

Thanks for the idea. I use

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

mtulett_splunk — Wed, 22 Nov 2017 00:33:57 GMT

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:

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

Nextbeat — Mon, 26 Mar 2018 11:53:02 GMT

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: