Login is creating a bottom spacing with CSS

Question

Login is creating a bottom spacing with CSS

Navigation

#1 by (0 votes)

1

Well, I have this css code for Login. What happens is that there must be some error because I get a huge space at the bottom of the screen.

Ileaveyouwithmycode

<style>/*Full-widthinputfields*/input[type=text],input[type=password]{width:100%;padding:12px20px;margin:8px0;display:inline-block;border:1pxsolid#ccc;box-sizing:border-box;}.inicioenter{position:absolute;left:35%;top:35%}/*Setastyleforallbuttons*/button{background-color:#4CAF50;color:white;padding:14px20px;margin:8px0;border:none;cursor:pointer;width:100%;}button:hover{opacity:0.8;}/*Centertheimageandpositiontheclosebutton*/.imgcontainer{text-align:center;margin:24px012px0;position:relative;}img.avatar{width:20%;border-radius:20%;}.container{padding:13px;}span.psw{float:right;padding-top:16px;}/*TheModal(background)*/.modal{display:none;/*Hiddenbydefault*/position:fixed;/*Stayinplace*/z-index:1;/*Sitontop*/left:0;top:0;width:100%;/*Fullwidth*/height:100%;/*Fullheight*/overflow:auto;/*Enablescrollifneeded*/background-color:rgb(0,0,0);/*Fallbackcolor*/background-color:rgba(0,0,0,0.4);/*Blackw/opacity*/padding-top:30px;}/*ModalContent/Box*/.modal-content{background-color:#fefefe;margin:5%auto15%auto;/*5%fromthetop,15%fromthebottomandcentered*/border:1pxsolid#888;width:50%;/*Couldbemoreorless,dependingonscreensize*/}/*TheCloseButton(x)*/.close{position:absolute;right:25px;top:0;color:#000;font-size:35px;font-weight:bold;}.close:hover,.close:focus{color:red;cursor:pointer;}/*AddZoomAnimation*/.animate{-webkit-animation:animatezoom0.6s;animation:animatezoom0.6s}@-webkit-keyframesanimatezoom{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframesanimatezoom{from{transform:scale(0)}to{transform:scale(1)}}/*Changestylesforspanandcancelbuttononextrasmallscreens*/@mediascreenand(max-width:300px){span.psw{display:block;float:none;}.cancelbtn{width:100%;}}</style>

TheHTMLI'musing:

<body><divclass="inicioenter">
        <center><h2>Iniciar Sessão</h2>
        <button onclick="document.getElementById('boxmodal').style.display='block'" style="width:auto;">Entrar</button></center>

    </div>

    <div id="boxmodal" class="modal">
      <form class="modal-content animate"  method="post">
        <div class="imgcontainer">
          <span onclick="document.getElementById('boxmodal').style.display='none'" class="close" title="Close Modal">&times;</span>
          <img src="img\profile-image.png" alt="Avatar" class="avatar">
        </div>

        <div class="container">
          <label for="uname" class="center-align"><b>Username</b></label>  
          <input id="username" type="text"  name="username" class="validate" autocomplete="off" required>

          <label for="password" class="center-align"><b>Password</b></label>
          <input id="password" type="password" class="validate" name="password" autocomplete="off" required>

          <div class="container2">
            <input type="submit" name="signin" value="Entrar" class="btn waves-effect waves-light">
          </div>


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

<!-- Abrir caixa de Login -->
<script>
      // Get the modal
      var modal = document.getElementById('boxmodal');

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
          if (event.target == modal) {
              modal.style.display = "none";
          }
      }
</script>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scripttype="text/javascript" src="js/materialize.min.js"></script>

</body>
</html>

css

asked by anonymous 08.09.2018 / 20:47

1 answer

condition to show data in combobox I can not use Android Studio (Gradle Project sync failed. Basic functionality ...)

score 0 · Accepted Answer

Materialize is setting the height max of modal on 70% of the screen, so the empty space below.

Redefine max-height in class .modal in 100% , or a value that overrides the value set by Materialize of 70% ( none , or inherit ):

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 30px;
    max-height: 100%; /* 100%, none ou inherit */
}