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
Legend

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
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
Legend

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

Enterprise Security Content Update (ESCU) | New Releases

In December, the Splunk Threat Research Team had 1 release of new security content via the Enterprise Security ...

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

(This is the first of a series of 2 blogs). Splunk Enterprise Security is a fantastic tool that offers robust ...

Index This | What are the 12 Days of Splunk-mas?

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