Hola estoy tratando de agregar una barra de desplazamiento horizontal en modal de bootstrap. Sé barras de desplazamiento horizontal no son una buena idea, pero en mi caso he de contenido dinámico que puede tener la variable anchura de lo que quiero hacer modal cuerpo capaces de desplazamiento horizontal cuando la anchura exceda de modal del cuerpo ancho.

aquí es lo que he intentado

<div class="modal-header">
<h3 class="modal-title">Decomposition</h3>

  <div class="modal-body">
  <div class="scoll-tree">
       <div class="list-group" ng-repeat="item in items"> 
          <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
       </div>

  </div>

</div>

CSS:

.modal-body {
     max-width: 900px;
     overflow-x: auto;
}

aquí está el violín lo he intentado..
https://jsfiddle.net/4duq2svh/2/

Cualquier ayuda es muy apreciada.

Gracias de antemano.

  • Puedes describir lo que han intentado, pero no de los resultados – si los hubiere. ¿Cómo se ve? ¿Cuál es el problema real? ¿Su ejemplo de trabajo parcialmente? No en todos?
  • ¿Esto PARA hilo ayuda con su desplazamiento horizontal.
  • mi solución no está funcionando no muestra ninguna barra de desplazamiento
  • no se que problema está hablando de otra cosa
  • por favor, puedes agregar un jsfiddle con su código.
  • por favor, compruebe el violín

InformationsquelleAutor arsinawaz | 2015-06-08

2 Comentarios

  1. 4

    de verificación https://jsfiddle.net/4duq2svh/3/

    HTML

    <div class="modal-body">
        <div class="scoll-tree">
            <div class="list-group" ng-repeat="item in items"> 
                <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
            </div>
        </div>
    </div>

    CSS

    .modal-body {
        max-width: 100%;
        overflow-x: auto;
    }
    .scoll-tree {
        width:5000px;
    }

    JS

    var totalwidth = 190 * $('.list-group').length;
    
    $('.scoll-tree').css('width', totalwidth);

    Aquí estoy calculando .scoll-tree ancho usando jQuery para ayudar barra de desplazamiento horizontal aparecen.

    • hizo que la barra de desplazamiento que aparece, pero el modal cuerpo y la barra de desplazamiento no crece con el contenido.
    • se puede hacer un violín mostrando su prb?
    • aquí tienes como puedes ver es mostrar la lista de grupos en la línea siguiente, en lugar de mostrar en una sola línea con una barra de desplazamiento jsfiddle.net/4duq2svh/2
    • comprobar mi actualiza el violín.
  2. 2

    Lo siento responder a mi propia pregunta, lo resuelto por el cálculo de la anchura de desplazamiento árbol div basado en el número de la lista de grupos en el interior, como un único grupo de la lista es 180px de ancho, el ancho será de 180 * numberOfItems. aquí está el código:

    $scope.getStyle = function(){
        var numberOfItems = $scope.tree.length;
    
        return {
            width  : 200 * numberOfItems + 'px',
            overflowX: 'auto'
        }   
    }
    
    <div class="modal-body" style="overflow-x: auto;">>
       <div class="scoll-tree" ng-style="getStyle();">
          <div class="list-group" ng-repeat="item in items"> 
            <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
          </div>
       </div>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here