Horizontale Bildlaufleiste Bot arbeitet im Bootstrap Modal

Ich habe ein Modal, zeigt div in 'modal-body'.Horizontale Bildlaufleiste Bot arbeitet im Bootstrap Modal

<div class="modal-body"> 
    <div class="scoll-tree"> 
     <div class="history"> 
      Report Event Details 
     </div> 
     <div class="history"> 
      Report Event Details 1 
     </div> 
     <div class="history"> 
      Report Event Details 2 
     </div> 
     <div class="history"> 
      Report Event Details 3 
     </div> 
    </div> 
</div>

die Klasse als Gebrüll Set:

.scoll-tree{ 
    width: 400px; 
    height:80px; 
    overflow-x: scroll; 
} 

.history { 
    background: rgba(255, 255, 255, 0.7); 
    float: left; 
    min-width: 5em; 
    width: 25ex; 
    max-height: 3em; 
    margin: 2em; 
    padding: 1em; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 16px; 
    box-shadow: 2px 5px 5px rgba(0,0,0,0.2); 
    vertical-align: central; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

I horizontale Bildlaufleiste 'scoll-tree' Container wollen, wenn 'history' div die Breite nicht überschreiten.

Derzeit gibt es vertikale Bildlaufleiste, ich möchte nur horizontale Bildlaufleiste.

https://jsfiddle.net/hemantmalpote/4duq2svh/35/

Quelle

2017-06-07 Hemant Malpote

prüfen diese https://jsfiddle.net/t9tr2kqz/ – XYZ

@XYZ: Sie gleichen Geige gegeben hatte. Es gibt nur vertikale Bildlaufleiste nicht horizontal. –

entfernen oder erhöhen Sie die Höhe der Scoll-Tree-Klasse, um vertikale Scroll in @ XYZ neueste Geige zu vermeiden –

gut nicht sicher, ob es ist das, was Sie suchen, aber überprüfen Sie es https://jsfiddle.net/4duq2svh/44/. Ich änderte man wenig CSS,

.modal-body { 
    width: 400px; 
    overflow-x: scroll; 
} 
.scoll-tree{ 
    width: 800px;//ideally you it is better to make js script which will calculate this value 
    height:80px; 
}

Quelle

2017-06-07 07:45:39 Angelzzz

sehr einfach - Verwenden Sie einfach max-width statt Breite & gesetzt overflow-x: auto. So wird es sein -

.scoll-tree{ 
    max-width: 400px; 
    height:80px; 
    overflow-x: auto; 
}

Sie können legen Sie es auf 200px zuerst den Zweck zu testen, ob Scroll erscheint oder nicht.

Quelle

2017-06-07 08:29:34

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     
 
     
 
    <div style="height:100px; width:100px; overflow-x:auto"> 
 
Content1 
 
Content2 
 
Content3 
 
Content4 
 
Content5 
 
Content6 
 
Content7 
 
Content8 
 
Content9 
 
Content10 
 
</div> 
 

 

 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

Quelle

2017-06-07 09:03:24

Horizontale Bildlaufleiste Bot arbeitet im Bootstrap Modal

Antwort

Verwandte Themen