I created a navbar with a form on the side but when I add several inputs in the form the page loses the background

Asked

Viewed 50 times

0

``

form view:

    <div class ="registerUser">
        <h1 class="w3-xxlarge ">Cadastro de clientes</h1>
        <hr style="width: 80%">
             <form method="POST" action="">
                <h3 class="w3-xlarge leftTitle escuro">Dados do cliente:</h3><br><br>    
                    <div class ="form-group esquerda" >
                        <label>Nome:</label>
                        <input class="form-control " type="text" placeholder="Insira o nome" required>
                        <br>
                        <label>Data de Vencimento:</label>
                        <input class="form-control" id="date" type="date">
                    </div>
                        <br><br> 
                <h3 class="w3-xlarge leftTitle escuro">Dados do carro:</h3><br><br> 
                    <div class ="form-group esquerda">
                        <label>Placa</label>
                        <input class="form-control" type="text" placeholder= "Informe a placa do veiculo"  >
                        <br>
                        <label>Cor</label>
                        <input class="form-control" type="text" placeholder="Informe a cor do veiculo" >
                        <br>
                        <label>Marca</label>
                        <input class="form-control" type="text" placeholder="Informe a Marca do veiculo"  >
                        <br>
                        <label>Modelo</label>
                        <input class="form-control" type="text" placeholder="Informe o Modelo do veiculo"  >
                                                   

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

Nav view:

`

<img src="../imgs/imgPark2.png" style="width:100%; height:12vh;">
<ul id="nav">
    <li><a  href="{{route ('ShowCar')}}" ><i class="fa fa-home w3-xxlarge"></i><br>Inicio</a></li>
    <li><a  ><i class="fa fa-user w3-xxlarge"></i><br>Clientes</a>
        <ul>
        <li><a href="{{route('registerUser')}}">Cadastrar cliente</a></li>
            <li><a href="#">Ver clientes</a></li>
            <li><a href="#">Data de pagamento</a></li>
            <li><a href="#">Remover Cliente</a></li>
          </ul>
        </li>
        <li><a id ="closeButton "href="{{route('Home')}}" ><i  class ="fa fa-close   w3-xxlarge"></i><br>Sair</a></li>

</ul>
</nav>`

CSS

body {
    width: 100%;
    height: 100% ;
    background-color: lightgray;
    color:lightgray; 
  }

.spot{
    background-color: black;
    height: 100%;
    display: block;
    width: 12vw;
    position: fixed!important;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    text-align: center;
    }
        ul li {
        position: relative;
        }

        li ul {
            position: absolute;
            left: 12vw;
            top: 0;
            display: none;
            
            }
            ul li a {
                display: block;
                text-decoration: none;
                color: white;
                
                font-family: 'Lucida Console', Monospace;
                
                background:black;
                font-size: x-large;
                padding: 12px;
                border: 0.5px solid rgb(0, 0, 0);
             }
             li:hover ul { display: block; }


             ul li a:hover{
                text-decoration:none;
                color: black;
                background: white;
             }
.registerUser{
    text-align:center;  
    position: absolute;
    top: 15vh;
    left: 30vw;
    background-color: white;
    padding: 25px 15vw 0 00px;
    border: 3px outset #fff;
    border-radius: 0.3rem;
div.esquerda{
margin-left: 5vw;
    display: inline-block;
  width: 320px;
  text-align: left  
}

.leftTitle{
    
   display: inline-block;
   width: 320px;
   text-align: left  
}

.escuro{
font-weight: 600;
}

2 answers

0


I believe that if you try to use the property min-height instead of 'height' no body can solve, as it will adapt to its maximum content if it exceeds the minimum.

Comparison between the two(px will be used in the example but the operation is the same)

#box{
  height: 100px;
  background-color: #bbb;
}
<div id="box">
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
</div>

Now with min-height:

#box{
  min-height: 100px;
  background-color: #bbb;
}
<div id="box">
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
</div>

Depending on how is your menu, when the body grows, it will stay at the top, an interesting solution is also to use overflow-y

#box{
  height: 100px;
  background-color: #bbb;
  overflow-y: scroll
}
<div id="box">
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
</div>

I also noticed an error in your code:

.registerUser{
text-align:center;  
position: absolute;
top: 15vh;
left: 30vw;
background-color: white;
padding: 25px 15vw 0 00px;
border: 3px outset #fff;
border-radius: 0.3rem;
div.esquerda{
margin-left: 
blabla...

One class is inside the other, no class closure . registerUser

I hope I’ve helped!!

  • As for the white space in the background, I solved it in another way, I found out that I had linked a css library that was messing me with it, I removed it and everything was normal :)

  • But I accepted his answer for having helped in the other things that were of great help, Valeuzão! D

  • Good then, I’m glad I could help

-1

I believe this may be happening due to:

.registerUser { 
  position: absolute
}

This way, this element will have a higher priority over the other elements (will be out of the normal flow of the document), besides its dimensions being defined by the internal content, which in its case exceeds the dimensions of the body, because they are defined as 100%:

body {
  width: 100%;
  height: 100%;  
}

Therefore, I believe that one possible solution would be to remove this dimensioning of body and leave their class .register thus:

.registerUser { 
  position: relative
}

I’m learning, but I hope I’ve helped.

Follows the documentation: position - CSS | MDN

  • I’m also getting a little bit of the CSS features so sometimes I get a little lost, but unfortunately this was not the solution because that white part still continues :(

Browser other questions tagged

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