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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...