Ho can I use CSS grid/flex to move these displays?

[ViniciusMariano]

Hey guys I have a question about CSS in splunk, I want to move these displays like this:

And I can't use dashboard studio because I need some special things that dahsboard studio doesn't have yet, like depends functionality, I'm trying with css grid but I couldn't find a way to do this yet

[tscroggins · Accepted solution]

Hi @ViniciusMariano,

In Simple XML, you can use row and panel elements to group inputs and visualizations. To display objects side-by-side, place them in separate panel elements. To display objects stacked top-to-bottom, place them in the same panel element. Combine panel elements within row elements for mixed layouts.

<form version="1.1" theme="light">
  <label>Quality Management Storage Rework</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="dropdown" token="region_tok">
        <label>Region</label>
        <choice value="All">All</choice>
        <default>All</default>
        <initialValue>All</initialValue>
      </input>
      <input type="dropdown" token="info_tok">
        <label>Info</label>
        <choice value="General">General</choice>
        <default>General</default>
        <initialValue>General</initialValue>
      </input>
      <chart>
        <title>Chart</title>
        <search>
          <query>| makeresults count=10
| rename count as x
| eval y=random()%10
| table x y</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
    <panel>
      <table>
        <title>Table</title>
        <search>
          <query>| makeresults count=10
| eval x=random()%10
| table _time x</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>