1

Tenho um modal com uma imagem na esquerda e vários comentários na direita, porém na direita eu gostaria que houvesse scroll a medida que os comentários não coubessem no modal. Então eu tenho essa row com várias rows dentro que serão os comentários, mas o scroll não aparece e o conteúdo fica escondido.

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>

Na primeira imagem o modal está com o overflow visible percebam que o modal fica maior que o tamanho da imagem mesmo eu tendo setado o tamanho maxima do modal com o tamanho da foto

inserir a descrição da imagem aqui

Agora eu setei overflow hidden no modal e ele esconde os cometários na div da direita mesmo o overflow dessa div estando hidden

inserir a descrição da imagem aqui

Agora o overflow da div dos comentários está como scroll, agora da pra ver que ele corta os comentários e não mostra o scroll.

inserir a descrição da imagem aqui

6
  • Dá para postar o modal?
    – user60252
    Commented 20/11/2017 às 20:42
  • Acho que não vai dar porque tem muito código php misturado, mas é um modal padrão do bootstrap, dividido no meio, onde eu gostaria que a div da direita ficasse com scroll para descer os comentários e a da direita que é uma imagem ficasse fixa. Commented 21/11/2017 às 9:52
  • Ao perguntar sobre um problema no seu código, você conseguirá melhores respostas se der às pessoas código que elas possam usar para reproduzir o problema. Só interessa as duas divs pra saber como são divididas e o css das duas
    – user60252
    Commented 21/11/2017 às 11:09
  • Editei meu post, ali onde ta imagem eu busco no banco uma imagem com tamanho predefinido e na esquerda busco do banco também vários comentários e estruturo da forma como está ali com rows e cols. Commented 21/11/2017 às 11:28
  • Código errado, veja que contém 2 <div class="row" id="comentarios"> e no css #myModal e na div id="myModalProva
    – user60252
    Commented 21/11/2017 às 11:50

1 Resposta 1

-1

É preciso definir um valor no heigth para a sua Div da direita onde vc quer o scroll. Depois disso coloque o overflow:auto nela e não no pai dela. Assim quando o conteúdo do filho for maior que o do pai o scroll vai aparecer na 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

3
  • Se eu fizer isso todo o modal vai ter um scroll, e o que eu quero é que somente a div da direita tenha um scroll e modal fique fixo Commented 21/11/2017 às 9:50
  • @MuriloHaas vc tem um valor de heigth definido para a sua Div da direita que vc quer que tenha o scroll? Se tiver, coloque o overflow: auto; nela e não no pai dela.
    – hugocsl
    Commented 21/11/2017 às 11:08
  • Eu tenho um max-height no modal, na minha div da direita o overflow está auto, e no modal desativado, mesmo assim ele não mostra o scroll na div da direita e esconde os elementos que estão pra baixo Commented 21/11/2017 às 11:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .