Dashboards & Visualizations

Webframework elements layout

AlexeyNL
Explorer

Can i manage of the elements layout on a dashboard panel?
For example, if i use following code, the elements dropdownviewTimeRange and dropdownviewTimeSpan are displayed in one column:

  <div class="dashboard-row">
    <div class="dashboard-cell" style="width: 100%;">
      <div class="dashboard-panel">
          <div class="panel-head">
            <h3>Properties</h3>
          </div>
          <div class="panel-body">
            <div id="dropdownviewTimeRange">

            </div>

            <div id="dropdownviewTimeSpan">

            </div>
          </div>
      </div>
    </div>

But i want to layout their in one line.

0 Karma
1 Solution

aelliott
Motivator

You have 2 options.

1 you could use apruenda's example and nest a dashboard row within the panelbody

2 you could use a table structure to format the fields instead of the floating.

<table>
<tr>
<td>Label1</td><td>Label2</td>
</tr>
<tr>
<td>
<div id="dropdownviewTimeRange" style="float: left;">

</div>
</td>
<td>
         <div id="dropdownviewTimeSpan">

            </div>
</td>
</tr>
</table>

View solution in original post

aelliott
Motivator

You have 2 options.

1 you could use apruenda's example and nest a dashboard row within the panelbody

2 you could use a table structure to format the fields instead of the floating.

<table>
<tr>
<td>Label1</td><td>Label2</td>
</tr>
<tr>
<td>
<div id="dropdownviewTimeRange" style="float: left;">

</div>
</td>
<td>
         <div id="dropdownviewTimeSpan">

            </div>
</td>
</tr>
</table>

AlexeyNL
Explorer

Your first advice has weird logic and this violates the nesting structure described in the aforementioned documentation:
"
This layout is represented by a pattern of nested

tags that represent the dashboard container and its elements:

dashboard-body
dashboard-row
dashboard-cell
dashboard-panel
panel-head
panel-body
"
But it's working. Thanks.

0 Karma

AlexeyNL
Explorer

aelliott's answer is useful for me. But i am faced with another problem. Adittionally I want to add labels to both Dropdown views. And i do this by editing my originally posted code:

  <div class="dashboard-row">
    <div class="dashboard-cell" style="width: 100%;">
      <div class="dashboard-panel">
          <div class="panel-head">
            <h3>Properties</h3>
          </div>
          <div class="panel-body">
            <p>Label1</p>
            <div id="dropdownviewTimeRange" style="float: left;">

            </div>
            <p>Label2</p>
            <div id="dropdownviewTimeSpan">

            </div>
          </div>
      </div>
    </div>

But resulting page doesn't look the way i expected: text Label1 with dropdownviewTimeRange are placed higher than Label2 and dropdownviewTimeSpan.
alt text

0 Karma

apruneda_splunk
Splunk Employee
Splunk Employee

This article describes how you can lay out controls for side-by-side layout: Splunk Dashboard Styles

aelliott
Motivator

Here is an article that may help. You can simply apply style="float:left;" within the divs.

http://stackoverflow.com/questions/4938716/align-div-elements-side-by-side

Get Updates on the Splunk Community!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

February 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...