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

Tech Talk Recap | Mastering Threat Hunting

Observability for AI Applications: Troubleshooting Latency

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

Are you a member of the Splunk Community?