2

Estoy usando bootstrap, tengo una ventana modal a la cual le quiero quitar el scroll, pero poder scrolear! Solo quiero que no este a la vista. Esta modal la tengo dentro de otra ventana modal. × Poblacion

                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button" id="buscarpoblacionmodal"> <span class="glyphicon glyphicon-search"> </span> </button>
                                        </span>
                                    </div>
                                </div>
                            </div> <!--____col-md-6___-->
                        </div> <!--Modal Header-->
                        <div class="modal-body modalpoblacion">
                            <table class="table table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th>
                                            Codigo Postal
                                        </th>
                                        <th>
                                            Poblacion
                                        </th>
                                        <th>
                                            Provincia
                                        </th>
                                </thead>

                                <tbody id="cuerpotabla"></tbody>
                            </table>
                        </div><!--modal-body-->
                    </div><!--Modal Content-->
                </div><!--Modal Dialog-->
            </div><!--Modal Fade-->
4
  • Sería bueno si agregaras código fuente que llevas, para entregar una respuesta basado en ello. Commented el 17 nov. 2016 a las 21:11
  • estoy usando lo que trae bootstrap por defecto, no se como agregar el codigo por aqui, pasa el limite de caracteres Commented el 17 nov. 2016 a las 21:19
  • Edita tu pregunta, abajo de las etiquetas te aparecen las opciones para hacerlo, añade tu código y dale formato con el mismo editor para poder ayudarte mejor respecto a lo que lleves
    – Jorius
    Commented el 17 nov. 2016 a las 21:22
  • ok ya lo hice, pero el codigo no aparece completo Commented el 17 nov. 2016 a las 21:28

3 respuestas 3

0

Hay algunas propiedades no estándar para modificar los estilos de los scroll, por ejemplo ::-webkit-scrollbar, pero posiblemente no funcionen en todos los navegadores o dejen de funcionar en alguna actualización.

También se podría intentar algo con JavaScript pero lo mas sencillo y compatible con todos los navegadores es usar un pequeño truco y ocultar la barra de scroll debajo de un div:

section {
  border: solid 1px red;
  width: 50%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  right: -20px;
  bottom: 0;
  padding-right: 15px;
  overflow-y: scroll;
  background:#eee;
}
<section>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas architecto laudantium earum debitis, vero optio laboriosam! Sed mollitia odit impedit similique esse, ipsum facilis voluptas recusandae beatae ducimus adipisci magni doloremque consectetur
    nihil provident blanditiis odio perspiciatis ut. Fugit, tenetur nulla at dicta id sequi similique, unde sit. Atque nihil unde est aspernatur sapiente provident corporis dolores maiores dolore harum, labore fugit eveniet cum, fugiat facere dolorum
    maxime quo assumenda mollitia rerum odit eius explicabo dignissimos! Deleniti porro alias, amet, temporibus impedit, facilis voluptatibus, ea quam eveniet unde voluptas aliquid. Eius, illo, repudiandae? Earum obcaecati provident hic perspiciatis placeat
    optio.</div>
</section>

2
  • Creía que habías dicho que la respuesta que te sirvió era la de @x4mp73r ¿Por qué aceptas la mía?
    – user7176
    Commented el 22 nov. 2016 a las 7:15
  • De hecho, yo supuse que era la mía jaja. En fin, quizá finalmente @Alcides Salazar optó por ésta. Commented el 22 nov. 2016 a las 21:51
0

En tu código, hay una etiqueta <div> correspondiente a la ventana Modal (el comentario, si te fijas al final, es el que dice <!-- Modal Dialog -->. En ese <div> prueba agregando el siguiente estilo:

<div ... style="overflow:hidden;">
   ...
</div>  <!-- Modal Dialog -->

Si no te funciona, remueve el estilo y ponlo en el <div> de <!-- Modal Content -->.

7
  • Ok perfecto. gracias me funciono, pero no puedo moverme hacia abajo. Commented el 17 nov. 2016 a las 21:59
  • ¿Ni usando el teclado? Commented el 18 nov. 2016 a las 17:11
  • Listo Ya resolvi, Gracias Commented el 18 nov. 2016 a las 18:22
  • 1
    @AlcidesSalazar ¿Cómo lo resolviste? Si te sirvió alguna de las respuestas márcala como aceptada, si encontraste otra forma sería bueno que la escribieras como respuesta y la aceptaras para que otra gente con el mismo problema lo pueda resolver
    – user7176
    Commented el 21 nov. 2016 a las 8:32
  • @blonfu con la respuesta de x4mp73r Commented el 21 nov. 2016 a las 21:44
0

Aquí un ejemplo sencillo:

HTML

 <div id="contenedor">
        <div id="tuModal">
            ...
        </div>
 </div>

CSS

 #contenedor{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

 #tuModal{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}

Extraído de aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.