Add some space between panels in same row

[prashant_kumar_]

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

Both the panels contain table.

Thanks

[niketn · Accepted solution]

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

[thambisetty]

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>