Solved: Add some space between panels in same row

prashant_kumar_ · ‎09-19-2020

How can I add little space between two panels in same row using HTML and CSS?

Both the panels contain table.

Thanks

niketn · ‎09-20-2020

@prashant_kumar_ please add more details by what do you mean by adding some space between two panels. By default Splunk adds a 5px margin between each panel which makes them appear separated. Do you want to increase the margin width? If so you are looking for the following CSS override:

          #myRowWithTwoPanels div.dashboard-panel{
            margin-right: 20px !important;
          }

PS: Where #myRowWithTwoPanels is the id of the row which has the two panels with tables where you want to have more gap. If you do not add row ID it will apply to all panels. Also if you want to apply margin to only first panel, you will have to give panel an id and include that in your CSS Style override.

Following is a run anywhere example for you to try out.

<dashboard theme="dark">
  <label>Panel Padding</label>
  <row id="myRowWithTwoPanels">
    <panel>
      <html depends="$alwaysHideCSSTestOverride$">
        <style>
          #myRowWithTwoPanels div.dashboard-panel{
            margin-right: 20px !important;
          }
        </style>
      </html>
      <table>
        <search>
          <query>| makeresults count=5 
| eval data=random()</query>
          <earliest>-1s</earliest>
          <latest>now</latest>
        </search>
        <option name="count">5</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <table>
        <search>
          <query>| makeresults count=5
| eval data=random()</query>
          <earliest>-1s</earliest>
          <latest>now</latest>
        </search>
        <option name="count">5</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

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

View solution in original post

niketn · ‎09-20-2020

@prashant_kumar_ please add more details by what do you mean by adding some space between two panels. By default Splunk adds a 5px margin between each panel which makes them appear separated. Do you want to increase the margin width? If so you are looking for the following CSS override:

          #myRowWithTwoPanels div.dashboard-panel{
            margin-right: 20px !important;
          }

PS: Where #myRowWithTwoPanels is the id of the row which has the two panels with tables where you want to have more gap. If you do not add row ID it will apply to all panels. Also if you want to apply margin to only first panel, you will have to give panel an id and include that in your CSS Style override.

Following is a run anywhere example for you to try out.

<dashboard theme="dark">
  <label>Panel Padding</label>
  <row id="myRowWithTwoPanels">
    <panel>
      <html depends="$alwaysHideCSSTestOverride$">
        <style>
          #myRowWithTwoPanels div.dashboard-panel{
            margin-right: 20px !important;
          }
        </style>
      </html>
      <table>
        <search>
          <query>| makeresults count=5 
| eval data=random()</query>
          <earliest>-1s</earliest>
          <latest>now</latest>
        </search>
        <option name="count">5</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <table>
        <search>
          <query>| makeresults count=5
| eval data=random()</query>
          <earliest>-1s</earliest>
          <latest>now</latest>
        </search>
        <option name="count">5</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

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

thambisetty · ‎09-19-2020

I have taken 2% from left and right. so you will see 4% gap between the panels. you can customize the way you want.

<dashboard>
  <label>space between panels</label>
  <row>
    <panel id="htmlpanel" depends="$dontshow$">
    <html>
      <style>
        #leftpanel {width: 48% !important;float: left;}
        #rightpanel {width: 48% !important;float: right;}
        #htmlpanel {width: 0% !important}
      </style>
    </html>  
    </panel>
    <panel id="leftpanel">
      <table>
        <search>
          <query>index=_internal | stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel  id="rightpanel">
      <table>
        <search>
          <query>index=_internal | stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

————————————
If this helps, give a like below.

Add some space between panels in same row

CSS

panel

simple XML

table

Index This | What is broken 80% of the time by February?

Unlock Faster Time-to-Value on Edge and Ingest Processor with New SPL2 Pipeline ...

Splunk MCP & Agentic AI: Machine Data Without Limits

Join the Conversation