Solved: Re: 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.

Screen Shot 2020-09-20 at 11.21.05 PM.png

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

Screen Shot 2020-09-20 at 11.21.05 PM.png

<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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

How much can you really learn in 3 minutes?

Event Series: The Agentic SOC: Trust Before Autonomy

Free Professional Services for .conf26 Attendees

Join the Conversation