topic Re: Webframework elements layout in Dashboards & Visualizations

Webframework elements layout

AlexeyNL — Mon, 16 Dec 2013 15:05:25 GMT

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.

Re: Webframework elements layout

aelliott — Mon, 16 Dec 2013 15:30:43 GMT

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

Re: Webframework elements layout

apruneda_splunk — Mon, 16 Dec 2013 18:05:23 GMT

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

Re: Webframework elements layout

AlexeyNL — Tue, 17 Dec 2013 07:58:10 GMT

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.

Re: Webframework elements layout

aelliott — Tue, 17 Dec 2013 14:22:26 GMT

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>

Re: Webframework elements layout

AlexeyNL — Wed, 18 Dec 2013 06:40:47 GMT

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.