How to add a scroll bar in Popup with css?

Asked

Viewed 624 times

0

I have the Popup below that when I decrease the screen it does not create the scroll bar not being possible to see the full content.

How can I create a scroll bar for when the browser is in a smaller size?

Full Screen - Normal:

inserir a descrição da imagem aqui

Smaller Screen - I miss part of the content:

inserir a descrição da imagem aqui

Code:

function OcultarDiv() {
            var meuDialogConteudo = document.getElementById("meuDialog");
            meuDialogConteudo.style.display = "none";
        }

        function MostrarDiv() {
            var meuDialogConteudo = document.getElementById("meuDialog");
            meuDialogConteudo.style.display = "block";
        }    
 #meuDialog {            
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0; 
            bottom: 0;
            left: 0; 
            right: 0; 
            background: rgba(0, 0, 0, 0.2);
            padding: 20px;
            overflow-y: auto;
        }

        #meuDialogConteudo {
            position: fixed;
            width: 600px; 
            height: 600px;
            top: 50%;
            margin-top: -300px; 
            left: 50%;
            margin-left: -300px;
            border: 1px double black; 
            background-color: deepskyblue; 
            overflow-y: auto;
        }
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Exemplo - PopUp001</title>
</head>
  
<body>    
      <div id="meuDialog">
            <div id="meuDialogConteudo">
                <input id="meuBotaoOcultar" type="button" onclick="OcultarDiv();" value="X" style="float: right; margin: 6px; background-color: red;" />                  
                <p>
                    Eu sou um popup criado com div e javascript sem usar jQuery.
                </p>                             
            </div>
        </div>

        <input id="meuBotaoMostrar" type="button" onclick="MostrarDiv();" value="Mostrar" style="margin: 6px; background-color: deepskyblue;" />     
</body>
</html>

css

  • From what I understand in your css, you want a fixed div in the center of the screen, correct?

3 answers

1

This scroll bar "is not working" because you left the fixed position and set a margin at the top.

My suggestion is you create a media to change this style when decreasing the screen.

These media are used to make the site responsive, within them you will adapt your style.

@media (max-width: 800px), (max-height: 600px) {

  #meuDialogConteudo {
    position: absolute;
    margin-top: -200px; 
  }  

}

See on working on Jsfiddle.

0

Use the attribute overflow: auto, this will cause a scroll bar to appear as soon as the height or width of the div exceeds the defined height or width.

  • I put it on, it doesn’t change anything :(

0

Only use the overflow: auto, that the scroll appears.

  • I put it on, it doesn’t change anything :(

Browser other questions tagged css

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