Dashboards & Visualizations

How to get chart and table on same row in dashboard html

RVDowning
Contributor

In the following, I removed the div ending the first row, and rmoved the div starting the second row, but the chart and its inline table still appear on different lines. Any clue what I am doing wrong?

<div class="dashboard-row dashboard-row1">
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">
                <div class="dashboard-element chart" id="element1" style="width: 25%">
                    <div class="panel-head">
                        <h3>Datasets Created by Type</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
                <div class="dashboard-element table" id="element2" style="width: 25%">
                    <div class="panel-head">
                        <h3>Chart for &#34;$type_tok$&#34;</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
1 Solution

somesoni2
Revered Legend

Try like this

<div class="dashboard-row dashboard-row1">
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">
                <div class="dashboard-element chart" id="element1" style="width: 100%">
                    <div class="panel-head">
                        <h3>Datasets Created by Type</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>            
            </div>
        </div>
    </div>
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">    
                <div class="dashboard-element table" id="element2" style="width: 100%">
                    <div class="panel-head">
                        <h3>Chart for &#34;$type_tok$&#34;</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

View solution in original post

somesoni2
Revered Legend

Try like this

<div class="dashboard-row dashboard-row1">
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">
                <div class="dashboard-element chart" id="element1" style="width: 100%">
                    <div class="panel-head">
                        <h3>Datasets Created by Type</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>            
            </div>
        </div>
    </div>
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">    
                <div class="dashboard-element table" id="element2" style="width: 100%">
                    <div class="panel-head">
                        <h3>Chart for &#34;$type_tok$&#34;</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

RVDowning
Contributor

Yep, that did it. Thanks!

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...