Angular mit Bootstrap - redundante Horizont Bildlaufleiste

Question

Ich arbeite an einer Anwendung in Angular. Einer meiner Komponenten hat die folgende Vorlage HTML:

<div class="panel panel-primary"> 
    <div class="panel-heading">Info</div> 
    <div class="panel-body"> 
     <ul class="nav nav-tabs"> 
       <li class="active"><a>Data</a></li>      
     </ul> 
     <br> 

     <div class="dataModel"> 
      <!--This div is creating a horizontal scrollbar --> 
     </div>  
    </div>  
</div> 

Die css mit dataModel Klasse zugeordnet ist, wie folgt:

.dataModel{ 
    height:400px; 
    overflow-y:scroll; 
    overflow-x: hidden; 
} 

Wenn die height dieses div unter 50px ist, weiß ich nicht eine horizontale Bildlaufleiste erhalten, aber jeder Wert über 50px erstellt eine horizontale Bildlaufleiste, die unerwartet ist, da die width unberührt ist.

ich aber von height zu auto Einstellung, aber das würde den Zweck der overflow-y

Ich vermute, Niederlage, dass die Bootstrap-Klassen sind ein Seitenverhältnis beibehalten auf dem div, die sein kann, warum die Höhe ändert die Affekte Breite. Ist das der Fall?

Bitte beraten. Dank

Answer 1

Ich reparierte dieses Problem durch die folgende Änderung zu tun:

<div class="row-fluid panel panel-primary"> 

in der ersten Zeile der Komponente html. Der Rest bleibt gleich.