Dashboards & Visualizations

Alignment and sizing of panels in dashboard

prettysunshinez
Explorer

I have dashboard with multiple panels and html buttons.
the problem is they do not have the same alignment as Iam.
What should be done??
Can any numbering possible to fix the alignment.
Pls suggest.

Tags (1)
0 Karma

niketn
Legend

@prettysunshinez can you either provide the mock up of Panel and Button design or provide the current Simple XML that you are having? Multiple panels means how many and which is the viz being used?

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

prettysunshinez
Explorer

Hi @niketnilay.

As suggested by you,i took the reference from the below link and created a button to show and hide events.

https://answers.splunk.com/answers/779524/can-an-html-button-with-value-be-done-without-usin-1.html

I have the same done for 9 other panels as well..
And in my UI i have placed the buttons rightly below the respective panels..
But for others,the alignment is not same.

I wanted to fix this

0 Karma

niketn
Legend

Are the 9 panels in the same row or different rows? The answer you have referred was created only for one panel. So I would need to know whether you plan to single rows with 9 panels next to each other and 9 show/hide buttons or you need to have 9 rows with one set of show/hide and panel?

A whiteboard screenshot of expected design would help assist better.

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

prettysunshinez
Explorer

Any suggestions on this please

0 Karma

jpolvino
Builder

If you're saying that the HTML element (button) is not staying centered under your panels, then you may try to add the HTML content within the panel itself. Here is a dummy dashboard that does just that.

<dashboard>
  <label>deleteme</label>
  <row>
    <panel>
      <table>
        <title>panel title</title>
        <search>
          <query>|makeresults
|eval d="123"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
      <html><center>element goes here</center></html>
    </panel>
    <panel>
      <table>
        <title>another panel</title>
        <search>
          <query>|makeresults
| eval sss="234"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
      <html><center>another element goes here</center></html>
    </panel>
  </row>
</dashboard>

You'll notice that the HTML data goes just before the panel item closes. This will keep it centered under the panel content. Try that and see if it gets you closer.

0 Karma

prettysunshinez
Explorer

Nope @jpolvino,In order to have the events populated on clicking the HTML button i have used the drilldown properties of a cell to perform that.So I could have the html content within the same panel.

So Im trying to find if I could fix the alignment through code.

Thanks 🙂

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...