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.
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>
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>
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
dashboard-body
dashboard-row
dashboard-cell
dashboard-panel
panel-head
panel-body
"
But it's working. Thanks.
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.
This article describes how you can lay out controls for side-by-side layout: Splunk Dashboard Styles
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