En el siguiente código, tengo un enlace dentro de un contenedor div, y ese enlace controla un menú desplegable de arranque. Ahora el menú desplegable está alineado con el enlace desplegable en sí. ¿Cómo puedo cambiar la posición del menú desplegable para que esté alineado con el div padre del enlace y tenga el mismo ancho que el div padre? Al igual que el padre div es el botón desplegable.

<!doctype html>
<html>
</head>
<body>
  <div class="widget-body" style="border: solid 1px black; height:45px; margin-bottom:10px;margin-right:20px;background:linear-gradient(to right, #85e2f0 5% , white 95%);">
  <div class="col-xs-2" style="height:45px; font-size: 28px;">
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </div>												
  <div class="col-xs-8" style="height:30px;text-align:center; border: solid 1px black;margin-top: 6px; display: flex; align-items: center;justify-content: center; background-color: #42d442;">test</div>												
  <div class="col-xs-2" style="height:43px; font-size: 27px; text-align: center;">
	<a data-toggle="dropdown">
      <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Another item</a></li>
       <li><a href="#">This is a longer item that will not fit properly</a></li>
    </ul>
  </div>
</div>
</body>
</html>

Aquí hay una demostración del código: demo

1
de li 23 dic. 2016 a las 10:41

3 respuestas

La mejor respuesta

Agregue este CSS:

    .widget-body {
        position: relative;
    }   
    .widget-body .col-xs-2.open {
        position: static;
    }
    .widget-body ul.dropdown-menu {
        right: 0;
    }
2
Awadhesh verma 23 dic. 2016 a las 07:51

Debe hacer que div.open 'col-xs-12' sea col-xs-2 y agregar este CSS:

.open a{
   display: inline-block;
   position: absolute;
   top: -42px;
   right: 12px; 
}

.dropdown-menu {
  position: absolute;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  width: 100%;
  top: 0;
}
0
Taniya 23 dic. 2016 a las 07:51

Utilice los atributos margin para mover el menú desplegable ul y para el ancho, verifique el relleno y el ancho mínimo del menú desplegable ul. Intente ajustarlos en su navegador.

   $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

      var $target = $( event.currentTarget );

      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );

      return false;

   });
.btn-input {
   display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
   left: 10px;
   overflow: hidden;
   position: absolute;
   right: 25px;
}

.btn-input .btn.form-control .caret {
   margin-top: -1px;
   position: absolute;
   right: 10px;
   top: 50%;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<div class="widget-body" style="border: solid 1px black; height:45px; margin-bottom:10px;margin-right:20px;
												     background:linear-gradient(to right, #85e2f0 5% , white 95%);">
													<div class="col-xs-2" style="height:45px; font-size: 28px;">
														<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
													</div>
														
													<div class="col-xs-8" style="height:30px;text-align:center; border: solid 1px black;
													                             margin-top: 6px; display: flex; align-items: center;
													                             justify-content: center; background-color: #42d442;">
														test
													</div>
														
													<div class="col-xs-2" style="height:43px; font-size: 27px; text-align: center;">
														<a data-toggle="dropdown">
                   	<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                 </a>
                 <ul class="dropdown-menu" style="margin-left:-400%; padding:0;min-width:260px;" role="menu">
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Another item</a></li>
                   <li><a href="#">This is a longer item that will not fit properly</a></li>
                 </ul>
													</div>
												</div>
0
Shivkumar kondi 23 dic. 2016 a las 07:57