Hi all,
I am using SPLUNK 7.0.0
I have converted my dashboard into html to make some changes to the layout
I have a piece of code as given below
<div id="panel6" class="dashboard-cell" style="width: 20%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Value</h2>
<div class="panel-element-row">
<div id="element6" class="dashboard-element single" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
I want to change the width of the panel from 20% to 50% hence I added the below code and adjusted the width of other panels accordingly.
<div id="panel6" class="dashboard-cell" style="width: 50% !important;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Value</h2>
<div class="panel-element-row">
<div id="element6" class="dashboard-element single" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
After saving it nothing changes
although in the source code i can still see the updated code.
Can you try overriding the style using panel ids?
<style>
#errorSinglePanel{
width:25% !important;
}
#errorStatsPanel{
width:30% !important;
}
#errorLineChartPanel{
width:45% !important;
}
</style>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Adjust Width of Panels in Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-timerangepicker" id="input1">
<label>Select Time</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="errorSinglePanel" class="dashboard-cell" style="width: 33.5%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Splunkd Errors (Single Value)</h2>
<div class="panel-element-row">
<div id="element2" class="dashboard-element single" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div id="errorStatsPanel" class="dashboard-cell" style="width: 33.5%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Top 5 Error (Stats)</h2>
<div class="panel-element-row">
<div id="element3" class="dashboard-element table" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div id="errorLineChartPanel" class="dashboard-cell" style="width: 33.5%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Splunkd Errors (Timechart)</h2>
<div class="panel-element-row">
<div id="element4" class="dashboard-element chart" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
Can you try overriding the style using panel ids?
<style>
#errorSinglePanel{
width:25% !important;
}
#errorStatsPanel{
width:30% !important;
}
#errorLineChartPanel{
width:45% !important;
}
</style>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Adjust Width of Panels in Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-timerangepicker" id="input1">
<label>Select Time</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="errorSinglePanel" class="dashboard-cell" style="width: 33.5%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Splunkd Errors (Single Value)</h2>
<div class="panel-element-row">
<div id="element2" class="dashboard-element single" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div id="errorStatsPanel" class="dashboard-cell" style="width: 33.5%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Top 5 Error (Stats)</h2>
<div class="panel-element-row">
<div id="element3" class="dashboard-element table" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div id="errorLineChartPanel" class="dashboard-cell" style="width: 33.5%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Splunkd Errors (Timechart)</h2>
<div class="panel-element-row">
<div id="element4" class="dashboard-element chart" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
You can reload these from disk using the following endpoint(s).
To reload all objects:
http://splunkinstanceip:8000/debug/refresh
To reload views only:
http://splunkinstanceip:8000/debug/refresh?entity=%2Fdata%2Fui%2Fnav&entity=%2Fdata%2Fui%2Fviews