Layout in html: Why do my charts resize to 50%?

[jeffland]

Hi.

I have converted the Simple XML produced with the web UI to html and would now like to edit it (as it seems Simple XML cannot do what I want to achieve, see my other question). Following the navskip in the layout, I basically have a dashboard-row with a dashboard-cell in it which contains a panel-element-row. In this row, I want two charts to display side by side. Therefore, I placed two dashboard-cells in it with a width of 50% each, and they both contain a dashboard-element-chart with a width of 100% (which should be redundant because this is the default). When I save the file and debug/refresh the resources, the page displays with the charts both at a width of 50%. I can change these with the debug tools of my browser (Firefox 35) back to 100%, and this change is also applied once I close the debug tools (other changes usually apply instantly, not sure why that is).

Is this behavior somehow expected, i.e. can there be some global setting interfering with the width of my charts? Or is this a bug?

Basics of my code:

    ...
    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
                ...
                <div class="panel-element-row">
                    <div class="dashboard-cell" style="width: 50%">
                        <div id="element1" class="dashboard-element chart" style="width: 100%">
                            ...
                        </div>
                    </div>
                    <div class="dashboard-cell" style="width: 50%">
                        <div id="element2" class="dashboard-element chart" style="width: 100%">
                            ...
                        </div>
                    </div>
                </div>
             ...

[masonmorales]

I'm not sure I understand the problem. You said that you want both charts to be displayed side-by-side. The row has a width of 100%, so to put them side-by-side, each chart is going to have a width of 50% (since 50% + 50% = 100%).

This is the default behavior of Splunk when adding two panels to the same row and is considered to be normal. Here's another example:

  ...
  <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>MY FIRST PANEL</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 chart" id="element2" style="width: 100%">
                        <div class="panel-head">
                            <h3>MY SECOND PANEL</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    ...

[jeffland]

I just read though my question again and apparently I wasn't precise enough.
I do want the cells which hold my charts to be at a width of 50% of the space available in the row. But inside these cells, my charts themselves should be at a width of 100% of the cell they're in - as opposed to what I get, which is two cells in a row with 50% width each, and both containing charts which only fill 50% of their respective cell (or in other words, each 25% of the row).