Content overlaid on the page

Asked

Viewed 35 times

0

I have two forms that overlap with the other contents of the page.inserir a descrição da imagem aqui

I needed opinions on what mistake is causing this and how to put the forms below the rest of the content

 <div style="background-color:#F8F9FA">
                 
<?php   
        
if (!isset($_SESSION['itens'])){
    $_SESSION['itens']=array();   
    
}
           if(isset($_GET['add'])&& $_GET['add']=="carrinho") {
               $idproduto = $_GET['id'];
               if(!isset($_SESSION['itens'][$idproduto])){
                  $_SESSION['itens'][$idproduto]=1;  
               }else{
               $_SESSION['itens'][$idproduto]+=1; 
               }
           }
            if (count($_SESSION['itens'])==0){
                echo'Carrinho vazio <br><a href="mol_compressao.php">Adicionar Itens</a>';
            }else{
                echo"
                 <h2>Resumo de Compras</h2>
                 <br>
 <div align='start'>
      <div class='card mx-auto w-100'>
        <div class='container-fluid''>
            <div class='row align-items-end' style='height:40px;'>
                <div class='col-md-2' style='text-align: center'><h5>REFERÊNCIA</h5></div>
                <div class='col-md-3' style='text-align: center'><h5>QUANTIDADE</h5></div>
                <div class='col-md-3' style='text-align: center'><h5>PREÇO UNITÁRIO</h5></div>
                <div class='col-md-2' style='text-align: center'><h5>PREÇO TOTAL</h5></div>
            </div>
        </div> 
          <hr>
";?>
              
               
                      <?php
                include ("db.php");
                $precototali=0;
                foreach($_SESSION['itens'] as $idproduto => $quantidade){
                    $select_car = "SELECT * FROM stock_comp WHERE id_mol_comp=$idproduto";
                    $result =  mysqli_query($con, $select_car);
                    $rows = array();
                    while ($row = $result->fetch_assoc()) {
                        $rows[] = $row;
                    $precototal=$row['preco']*$quantidade;
                        $precototali+=$precototal;
                    $precoiva=$precototali*1.23;
                        
        echo "
            <div class='card-body'>
                <div class='row align-items-center' style='height:0px;'>
                    <div class='col-md-2' style='text-align: center'>$row[referencia]</div>
                    <div class='col-md-3' style='text-align: center'><i style='font-size:36px' class='fa'>&#xf147;</i>&nbsp$quantidade&nbsp<i style='font-size:36px' class='fa'>&#xf196;</i></div>
                    <div class='col-md-3' style='text-align: center'> ".number_format($row['preco'],2,",",".")." €</div>
                    <div class='col-md-2' style='text-align: center'> ".number_format($precototal,2,",",".")." €</div>
                 <div class='col-md-2' style='text-align: center'><i class='fa fa-remove' style='font-size:24px'></i></div>
                 
</div>
            </div>
        ";
                       
    }             
        }
         }
                     echo "
                 <br>
                            <div class='col-md-11' style='text-align: end'><h4>Total(s/IVA): ".number_format($precototali,2,",",".")." €</h4></div> 
                            
                            <div class='col-md-11' style='text-align: end'><h2>Total(c/IVA): ".number_format($precoiva,2,",",".")." €</h2></div> 
                            <br>
                ";
                  echo"
<hr>
                ";
                
?>
                <br>
                <div class="card">
        <div class='row align-items-center' style='height:20px;'>
         <div class='col-md-6' style='text-align: start'>  
        <h2>Dados de envio</h2>
             <div class="card-body">
            <label for="empresa">Empresa:</label>
            <input type="text" class="form-control" name="empresa" required/><br>
        <div class="row">
        <div class="col-sm-6">
            <label for="nif">NIF:</label>
            <input type="text" class="form-control" name="nif" required/><br>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-6">
                <label for="exampleFormControlSelect1">Indicativo:</label>
            <select class="form-control" name="countryCode" id="indicativo">
        <option data-countryCode="PT" value="351">Portugal (+351)</option>        
		<option data-countryCode="DZ" value="213">Algeria (+213)</option>
</select>
            </div>
            
            <div class="col-sm-6">
           <label for="telefone">Telefone:</label>
            <input type="text" class="form-control" name="telefone" required/><br>
            </div>
            </div>
            <label for="morada">Morada:</label>
            <input type="text" class="form-control" name="morada" required/>       <br>  
        <div class="row">
            
            <div class="col-sm-6">
            <label for="codigopostal">Código postal:</label>
            <input type="text" class="form-control" name="codigopostal" required/><br>
                </div>
            <div class="col-sm-6">
            <label for="cidade">Cidade:</label>
            <input type="text" class="form-control" name="cidade" required/>
                </div>
        </div>
       <div class="col-sm-6">
            <label for="exampleFormControlSelect1">País:</label> 
            <select class="form-control" name="pais" name="pais"> 
    <option value="PT">Portugal</option>
    <option value="ES">Spain</option>
    <option value="FR">France</option>
    <option value="IT">Italy</option>
    <option value="DE">Germany</option>
    <option value="GB">United Kingdom</option>
	<option value="US">United States</option>
	<option value="BR">Brazil</option>
</select> 
        </div>
    </div>
             </div>  
           <div class='col-md-6' style='text-align: start'>   
        <h2>Dados de faturação</h2> 
                  <div class="card-body">
            <label for="empresa">Empresa:</label>
            <input type="text" class="form-control" name="empresa" required/><br>
        <div class="row">
        <div class="col-sm-6">
            <label for="nif">NIF:</label>
            <input type="text" class="form-control" name="nif" required/><br>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-6">
                <label for="exampleFormControlSelect1">Indicativo:</label>
            <select class="form-control" name="countryCode" id="indicativo">
        <option data-countryCode="PT" value="351">Portugal (+351)</option>        
		<option data-countryCode="DZ" value="213">Algeria (+213)</option>
		<option data-countryCode="AD" value="376">Andorra (+376)</option>

</select>
            </div>
            
            <div class="col-sm-6">
           <label for="telefone">Telefone:</label>
            <input type="text" class="form-control" name="telefone" required/><br>
            </div>
            </div>
            <label for="morada">Morada:</label>
            <input type="text" class="form-control" name="morada" required/>       <br>  
        <div class="row">
            
            <div class="col-sm-6">
            <label for="codigopostal">Código postal:</label>
            <input type="text" class="form-control" name="codigopostal" required/><br>
                </div>
            <div class="col-sm-6">
            <label for="cidade">Cidade:</label>
            <input type="text" class="form-control" name="cidade" required/>
                </div>
        </div>
       <div class="col-sm-6">
            <label for="exampleFormControlSelect1">País:</label> 
            <select class="form-control" name="pais" name="pais"> 
    <option value="PT">Portugal</option>
    <option value="ES">Spain</option>
    <option value="FR">France</option>
    <option value="IT">Italy</option>
    <option value="DE">Germany</option>
    <option value="GB">United Kingdom</option>
	<option value="US">United States</option>
	<option value="BR">Brazil</option>
</select> 
        </div>
    </div>
  
  </div>
               </div>
                    </div>
                </div>
                <br>
      <button type='button' class='btn btn-outline-info btn-lg btn-block'>Finalizar</button>

  • 1

    One of the things that can be is the use of position:Absolute or float:left in the css of that form. Make sure you are not using these styles in them. It’s an easy thing to check and sometimes it can solve.

1 answer

1


Hello!
I cannot see the descriptive image of the problem, however it seems to me that there are some things missing, namely:

  • Divs close in php
       <div align='start'>
            <div class='card mx-auto w-100'>
  • div with class "Row align-items-center" with fixed height of 20px which makes the outside boot is on its contents

    Keep it Strong ;)

  • 1

    solved, the problem was in fixed height, I removed it and it worked.

Browser other questions tagged

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