Remove Scroll in bootstrap

Question

Remove Scroll in bootstrap

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I'm using bootstrap, I have a modal window to which I want to remove the scroll, but I can scrole! I just want it not to be in view. I have this modal inside another modal window. × Population

                                        <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-->

html css bootstrap

asked by Alcides Salazar 17.11.2016 в 22:09

source

3 answers

0

In your code, there is a <div> tag corresponding to the Modal window (the comment, if you look at the end, is the one that says  .) In that <div> try adding the following style:

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

If it does not work for you, remove the style and put it in <div> of  .

answered by 17.11.2016 в 22:36

0

Here is a simple example:

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;
}

Extracted from here

answered by 17.11.2016 в 23:24

How to view a PDF file in the browser? When rebuilding a Bootstrap Slider, it does not get the value of the current position again

score 0 · Accepted Answer

There are some non-standard properties to modify the styles of scroll , for example ::-webkit-scrollbar , but they may not work in all browsers or stop working in some update.

You could also try something with JavaScript but the simplest and most compatible with all browsers is to use a little trick and hide the scroll bar below a 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>