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!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...