my dropdown leaves the screen, how do I get it down to the opposite side?

1

The dropdown of the cart, out of the image, can you make it drop down to the left?

here is the code:

@import '//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css';
@import '//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<!-- Navigation -->
     <div class="navbar navbar-expand bg-light" >
        <div class="container-fluid">
       <a href="index.php" class="navbar-brand"><img src="imagens/logo_fanamol.png" width="130" height="140"></a>
  <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>-->

  <div class="collapse navbar-collapse">
    <ul class="nav nav-tabs">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home <span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sobre Nós</a>
      </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Loja online
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="mol_compressao.html">Molas de Compressão</a>
          <a class="dropdown-item" href="mol_tracao.html">Molas de Tração</a>
          <a class="dropdown-item" href="mol_torcao.html">Molas de Torção</a>
          <a class="dropdown-item" href="mol_pressao.html">Molas de Pressão</a>
          <a class="dropdown-item" href="mol_lamina.html">Molas de Lamina</a>
        </div>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="contactos.php">Contactos</a>
      </li>       
    </ul>
      </div>
            
      <ul class="nav nav-navbar navbar-right">
          <ul class="nav nav-tabs">           
             
          <div class="nav-link dropdown">
              <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf090;</i>Entrar</a>
              <div class="dropdown-menu" style="width:300px;">
                    <div class="panel panel-primary">
                        <div class="panel-heading"><h3 align="center">Entrar</h3></div>
                        <div class="panel-heading">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" required/>
                        <label for="email">Password:</label>
                        <input type="password" class="form-control" id="password" required/>
                               <br/>
                            <a href="#" style="color:blue; list-style:none;">Esqueci a password</a><input type="submit" class="btn btn-primary" style="float:right;" id="login" value="Login">
                        </div>
                        <div class="panel-footer" id="e_msg"></div>
                        </div>    
                  
              </div>
              </li>
              </div>
              
              
                <li class="nav-item"><a class="nav-link" href="#"><i style="font-size:24px" class="fa">&#xf2c0;</i>
Registrar</a>
              </li>
               <div class="nav-link dropdown" >
               <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf07a;</i>Carrinho</a>
                   <div class="dropdown-menu" style="width:600px;">
                   <div class="panel panel-success">
                       <div class="panel-heading">
                       <div class="row">
                           <div class="col-md-3">ref</div>
                           <div class="col-md-3">productimage</div>
                           <div class="col-md-3">productname</div>
                           <div class="col-md-3">price</div>

                           </div>
                       </div>
                       <div class="panel-body"></div>
                       <div class="panel-footer"></div>
                       </div>
                   </div>
                   
            </li>
                   </div>
     </ul>
          </ul>
            </div>
            
      </div>

      <br>
      
      <div class="col-md-8 single-right-left simpleCart_shelfItem">
					<h3>Big Wing Sneakers  (Navy)</h3>
            <p><span class="item_price">$650</span> <del>- $900</del></p>
					</div>
					<div class="occasion-cart">
						<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2">
															<form action="#" method="post">
																<fieldset>
																	<input type="hidden" name="cmd" value="_cart">
																	<input type="hidden" name="add" value="1">
																	<input type="hidden" name="business" value=" ">
																	<input type="hidden" name="item_name" value="Wing Sneakers">
																	<input type="hidden" name="amount" value="650.00">
																	<input type="hidden" name="discount_amount" value="1.00">
																	<input type="hidden" name="currency_code" value="USD">
																	<input type="hidden" name="return" value=" ">
																	<input type="hidden" name="cancel_return" value=" ">
																	<input type="submit" name="submit" value="Add to cart" class="button">
																</fieldset>
															</form>
														</div>
																			
					</div>

    
asked by anonymous 03.05.2018 / 13:13

2 answers

1

You have greatly changed the basic structure of the standard Bootstrap Drop-Menu template. It seems that you are wanting to build a "page" inside that Drop that will open ...

Anyway even the indicated being .dropdown-menu-right as @dvd indicated this class will not work in your case. You will have to make a more specific CSS to do the right align, as it should have something overwriting the styles or something like ...

In the case I put div with dropdown-menu a left:auto and right:0 and now it's getting just right.

See how it looks below. (display all page to see better since you have not yet treated the responsive part)

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<!-- Navigation -->
     <div class="navbar navbar-expand bg-light" >
        <div class="container-fluid">
       <a href="index.php" class="navbar-brand"><img src="imagens/logo_fanamol.png" width="130" height="140"></a>
  <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>-->

  <div class="collapse navbar-collapse">
    <ul class="nav nav-tabs">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home <span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sobre Nós</a>
      </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Loja online
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="mol_compressao.html">Molas de Compressão</a>
          <a class="dropdown-item" href="mol_tracao.html">Molas de Tração</a>
          <a class="dropdown-item" href="mol_torcao.html">Molas de Torção</a>
          <a class="dropdown-item" href="mol_pressao.html">Molas de Pressão</a>
          <a class="dropdown-item" href="mol_lamina.html">Molas de Lamina</a>
        </div>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="contactos.php">Contactos</a>
      </li>       
    </ul>
      </div>
            
      <ul class="nav nav-navbar navbar-right">
          <ul class="nav nav-tabs">           
             
          <div class="nav-link dropdown">
              <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf090;</i>Entrar</a>
              <div class="dropdown-menu" style="width:300px;">
                    <div class="panel panel-primary">
                        <div class="panel-heading"><h3 align="center">Entrar</h3></div>
                        <div class="panel-heading">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" required/>
                        <label for="email">Password:</label>
                        <input type="password" class="form-control" id="password" required/>
                               <br/>
                            <a href="#" style="color:blue; list-style:none;">Esqueci a password</a><input type="submit" class="btn btn-primary" style="float:right;" id="login" value="Login">
                        </div>
                        <div class="panel-footer" id="e_msg"></div>
                        </div>    
                  
              </div>
              </li>
              </div>
              
              
                <li class="nav-item"><a class="nav-link" href="#"><i style="font-size:24px" class="fa">&#xf2c0;</i>
Registrar</a>
              </li>
               <div class="nav-link dropdown" >
               <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf07a;</i>Carrinho</a>
                   <div class="dropdown-menu" style="width:600px; left: auto; right: 0;">
                   <div class="panel panel-success">
                       <div class="panel-heading">
                       <div class="row">
                           <div class="col-md-3">ref</div>
                           <div class="col-md-3">productimage</div>
                           <div class="col-md-3">productname</div>
                           <div class="col-md-3">price</div>

                           </div>
                       </div>
                       <div class="panel-body"></div>
                       <div class="panel-footer"></div>
                       </div>
                   </div>
                   
            </li>
                   </div>
     </ul>
          </ul>
            </div>
            
      </div>

      <br>
      
      <div class="col-md-8 single-right-left simpleCart_shelfItem">
					<h3>Big Wing Sneakers  (Navy)</h3>
            <p><span class="item_price">$650</span> <del>- $900</del></p>
					</div>
					<div class="occasion-cart">
						<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2">
															<form action="#" method="post">
																<fieldset>
																	<input type="hidden" name="cmd" value="_cart">
																	<input type="hidden" name="add" value="1">
																	<input type="hidden" name="business" value=" ">
																	<input type="hidden" name="item_name" value="Wing Sneakers">
																	<input type="hidden" name="amount" value="650.00">
																	<input type="hidden" name="discount_amount" value="1.00">
																	<input type="hidden" name="currency_code" value="USD">
																	<input type="hidden" name="return" value=" ">
																	<input type="hidden" name="cancel_return" value=" ">
																	<input type="submit" name="submit" value="Add to cart" class="button">
																</fieldset>
															</form>
														</div>
																			
					</div>

OBS: You need to check the construction of this Nav-Bar because it is only dropping after the second click!

    
03.05.2018 / 15:29
3

Add the class .dropdown-menu-right to div .dropdown-menu , to align the menu on the right, thus:

<div class="dropdown-menu dropdown-menu-right" style="width:600px;">

Bootstrap 4: Menu Alignment

    
03.05.2018 / 15:01