Bootstrap verstecktes Element erstreckt sich hinter Container, wenn erweitert

Question

Ich habe eine Website, die viele Echtzeit-Grafiken und Messgeräte, alle in den Schubladen zunächst versteckt angezeigt. Die Diagramme werden mit der Bibliothek plotly.js erstellt. Die Messgeräte werden mit JustGage erstellt. Der Code für die Behälter ist als solche:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5 statistics"> 
     <div class="centered-text"> 
      <div class="container-fluid"> 
       <div class="panel panel-info"> 
        <div class="panel-heading"> 
         <h3 class="panel-heading">Statistics Panel</h3> 
        </div> 
        <ul class="list-group"> 

         <!-- Base Station Panel --> 
         <li class="list-group-item"> 
          <div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1"> 
           <div class="col-lg-10 text-left"> 
            Base Station 
           </div> 
           <div class="col-lg-2"><i class="fa fa-chevron-down pull-right"></i></div> 
          </div> 
          <div id="detail-1"> 
           <hr></hr> 
           <div class="container-fluid"> 
            <div class="fluid-row"> 
             <div class="col-lg-6"> 
              <div id="happygraph1"></div> 
              <input id="happybutton1" type="button" value="View History" 
                onclick="happygraph1.changeMode();"/> 
             </div> 
             <div class="col-lg-6"> 
              <div id="happygraph2"></div> 
              <input id="happybutton2" type="button" value="View History" 
                onclick="happygraph2.changeMode();"/> 
             </div> 
            </div> 
            <div class="fluid-row"> 
             <div class="col-lg-6"> 
              <div id="happygraph3"></div> 
              <input id="happybutton3" type="button" 
                value="View History" onclick="happygraph3.changeMode();"/> 
             </div> 
            </div> 
            <div class="container-fluid"> 
             <div class="fluid-row"> 
              <div class="col-sm-6"> 
               <div id="happygauge1 style="height: 250px; width: 300px;"></div> 
              </div> 
             </div> 
             <div class="col-sm-6"> 
              <div id="happygauge2" style="height: 250px; width: 300px;"></div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Das Problem, dass, wenn die Seite geladen wird, wenn die Daten in den Diagrammen erscheinen beginnen, bevor das versteckte Element erweitert wird, die Graphen Container erstrecken des neu erweiterten Elements. Wenn das Element jedoch zuerst erweitert wird und die Daten dann eingehen, verhält es sich genau so, wie es sein sollte. Es gibt kein Problem mit den Messgeräten. Hier

ist ein Screenshot von, wenn es funktioniert: graph containers stay within element

Hier ist ein Screenshot von, wenn das Element erweitert wird, nachdem die Daten, die gezogen hat begonnen: graph containers expand out of element

Die Schubladen (und das Layout im Allgemeinen) wird durch Bootstrap erledigt. Was verursacht den Bruch der Behälter? Ich habe versucht, mit den flüssigen Reihen- und Behältereigenschaften zu spielen, jedoch ohne Erfolg. Danke im Voraus.

Answer 1

Es scheint, das Problem war nicht mit Bootstrap überhaupt, aber mit einigen der Layout-Optionen in Plotly gesetzt. Plotly dimensionierte die Grafiken so, dass sie viel größer als der Container waren, wenn sie nur versteckt geladen wurden.