Editing Splunk Dashboard after converting to HTML

[nkankur]

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.

[niketn · Accepted solution]

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>

[p_gurav]

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