Scroll does not work in the bootstrap modal

Question

Scroll does not work in the bootstrap modal

Asked 7 years ago

Viewed 1,735 times

1

I have a modal with an image on the left and several comments on the right, but on the right I wish there was a scroll as the comments did not fit in the modal. Then I have this Row with several Rows inside that will be the comments, but the scroll does not appear and the content is hidden.

CSS

 #comentarios{
    margin-top: 5px;
    margin-right: 5px;
    overflow:visible; 
  }

  #myModal{

    max-height: 540px;
    overflow: hidden;
  }

<div class="modal"  id="myModalProva" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document" >
            <div class="modal-content" >
                <div class="modal-body" id="modal-prova" style="padding:0;" >

                    <div class="row">
                        <div class="col-7">
                            IMAGEM
                        </div>

                        <div class="col-5" >
                            <div class="row" id="comentarios">
                               <div class="row" id="comentarios">
                                    <div class="row">   
                                        <div class="col">
                                            <p> - Esse é um teste de um comentário </p>
                                        </div>
                                    </div>
                                    <div class="row">   
                                        <div class="col">
                                            <p> - Esse é um teste de um comentário </p>
                                        </div>
                                    </div>
                                    <div class="row">   
                                        <div class="col">
                                            <p> - Esse é um teste de um comentário </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>

            </div>
        </div>
        </div>
    </div>

In the first image the modal is with the Visible overflow realize that the modal gets bigger than the size of the image even though I have set the maximum size of the modal with the size of the photo

Now I’ve set up overflow Hidden in the modal and it hides the committals in the right div even the overflow of that div being Hidden

Now the overflow of the comments div is as scroll, now you can see that it cuts the comments and does not show the scroll.

You can post the modal?

– user60252

2017/11/20 at 20:42
I think it won’t work because there is a lot of php code mixed, but it is a standard modal of bootstrap, divided in the middle, where I would like the right div to scroll down the comments and the right one that is a picture stay fixed.

– Murilo Haas

2017/11/21 at 09:52
When you ask about a problem in your code, you’ll get better answers if you give people code that they can use to reproduce the problem. It only matters the two Ivs to know how they are divided and the css of the two

– user60252

2017/11/21 at 11:09
I edited my post, there where this image I search in the bank an image with preset size and on the left I look for several comments and structure as it is there with Rows and cols.

– Murilo Haas

2017/11/21 at 11:28
Wrong code, see that contains 2 <div class="row" id="comentarios"> and in css #myModal and in the div id="myModalProva

– user60252

2017/11/21 at 11:50
This is because I have to take the php code I think I ended up duplicating it by posting here, updated with two photos to better exemplify my problem

– Murilo Haas

2017/11/21 at 12:04

Show 1 more comment

1 answer

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2017-11-20T21:11:37+00:00

It is necessary to define a value in heigth to your right Div where you want the scroll. After that put the overflow:auto in it and not in her father. So when the content of the child is greater than that of the father the scroll will appear in the Div.

img {
            display: block;
        }
        .pai div {
            float: left;
            width: 100px;
            border: 1px solid black;
        }
        .of-y {
            height: 100px;
            overflow-y: auto;
        }

Editei a resposta com um modelo simples com coluna da esquerda fixa e da direita com scroll, olha se ajuda. Vale lembrar que o scroll só vai aparecer quando a altura do filho for maior que a altura do pai.

<div class="pai">
        <div class="fixa">
            <img src="http://www.fillmurray.com/100/100" alt="">
        </div>
        <div class="of-y">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolor nostrum cupiditate facilis modi possimus aliquid. Adipisci illo nesciunt omnis.
        </div>
    </div>

[]'s