Dashboards & Visualizations

How can I add spaces between panels in dashboard?

Julieda
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

renjith_nair
SplunkTrust
SplunkTrust

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

  <row>
    <panel>
      <html>
      <u1> </u1>
    </html>
    </panel>
  </row>
Happy Splunking!

View solution in original post

Nextbeat
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

mtulett_splunk
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

jinnypt
Explorer

I want to know how make empty space between panels.

Some body help this question!

0 Karma

niketn
Legend

@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

renjith_nair
SplunkTrust
SplunkTrust

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

  <row>
    <panel>
      <html>
      <u1> </u1>
    </html>
    </panel>
  </row>
Happy Splunking!

Julieda
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

tamduong16
Contributor

Thanks for the idea. I use

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...