Problema con panel y formulario Bootstrap

publicado por: Anonymous

Al colocar unas pestañas en el panel-title, el formulario que tengo en el panel-primary llega hasta el límite donde se inician los tabs.

El problema es esta clase: <div class="pull-right">. Si la quito, mi formulario toma todo el espacio del panel-primary pero los tabs se pegan a la izquierda sobre el título.

Éste es mi código:

_x000D_

_x000D_

/*Panel tabs*/_x000D_
.panel-tabs {_x000D_
  position: relative;_x000D_
  bottom: 30px;_x000D_
  clear:both;_x000D_
  border-bottom: 1px solid transparent;_x000D_
}_x000D_
_x000D_
.panel-tabs > li {_x000D_
  float: left;_x000D_
  margin-bottom: -1px;_x000D_
}_x000D_
_x000D_
.panel-tabs > li > a {_x000D_
  margin-right: 2px;_x000D_
  margin-top: 4px;_x000D_
  line-height: .85;_x000D_
  border: 1px solid transparent;_x000D_
  border-radius: 4px 4px 0 0;_x000D_
  color: #ffffff;_x000D_
}_x000D_
_x000D_
.panel-tabs > li > a:hover {_x000D_
  border-color: transparent;_x000D_
  color: #ffffff;_x000D_
  background-color: transparent;_x000D_
}_x000D_
_x000D_
.panel-tabs > li.active > a,_x000D_
.panel-tabs > li.active > a:hover,_x000D_
.panel-tabs > li.active > a:focus {_x000D_
  color: #fff;_x000D_
  cursor: default;_x000D_
  -webkit-border-radius: 2px;_x000D_
  -moz-border-radius: 2px;_x000D_
  border-radius: 2px;_x000D_
  background-color: rgba(255,255,255, .23);_x000D_
  border-bottom-color: transparent;_x000D_
}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
_x000D_
<div class='container'>_x000D_
  <div class="panel panel-primary">_x000D_
    <div class="panel-heading">_x000D_
      <h6 class="panel-title" style=" font-size: 12px;">Traslados Presupuestarios</h6>_x000D_
      <!-- SI COLOCO ESTA CLASE EN EL DIV, TODO EL RESTO DEL FORMULARIO SE CORRE A LA IZQUIERDA -->_x000D_
      <div class="pull-right">_x000D_
        <!-- Tabs -->_x000D_
        <ul class="nav panel-tabs">_x000D_
          <li><a href="#tab1" data-toggle="tab">B</a></li>_x000D_
          <li><a href="#tab2" data-toggle="tab">I</a></li>_x000D_
        </ul>_x000D_
      </div>_x000D_
    </div>_x000D_
    <form class="form-horizontal">_x000D_
      <fieldset>_x000D_
        <div class="row">_x000D_
          <div class="col-md-2" align="right">_x000D_
            <label for="inputEmail" class="control-label">Número de Solicitud</label>_x000D_
          </div>_x000D_
          <div class="col-md-2">_x000D_
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">_x000D_
          </div>_x000D_
          <div class="col-md-1" align="right">_x000D_
            <label for="inputEmail" class="control-label">Fecha</label>_x000D_
          </div>_x000D_
          <div class="col-lg-2">_x000D_
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">_x000D_
          </div>_x000D_
          <div class="col-md-1" align="right">_x000D_
            <label for="inputEmail" class="control-label"></label>_x000D_
          </div>_x000D_
          <div class="col-md-2" align="right">_x000D_
            <label for="inputEmail" class="control-label">Disminuciones Bs.</label>_x000D_
          </div>_x000D_
          <div class="col-lg-2">_x000D_
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">_x000D_
          </div>_x000D_
        </div>_x000D_
        <div class="row">_x000D_
          <div class="col-md-2" align="right">_x000D_
            <label for="textArea" class="control-label">Concepto</label>_x000D_
          </div>_x000D_
          <div class="col-md-10">_x000D_
            <textarea class="form-control" rows="2" id="textArea" placeholder="Email" style="font-size:11px;"></textarea>_x000D_
          </div>_x000D_
        </div>_x000D_
        <div class="row">_x000D_
          <div class="col-md-12" align="center">_x000D_
            <button type="reset" class="btn btn-default btn-sm">Nuevo</button>_x000D_
            <button type="submit" class="btn btn-primary btn-sm">Siguiente</button>_x000D_
          </div>_x000D_
        </div>_x000D_
      </fieldset>_x000D_
    </form>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

Una solución rápida (dependiendo lo que quieras) consiste en poner a flotar a la izquierda (clase pull-left) el h6 que está al mismo nivel del contenedor de los tabs, y aplicarle la clase clearfix al elemento que los contiene.

El resto son ajustes mínimos de posición como hacer que los dos elementos tengan el mismo line-height y no utilizar el posicionamiento relativo para los tabs.

<div class='container'>
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h6 class="panel-title pull-left" style=" font-size: 12px;">Traslados Presupuestarios</h6>
            <div class="pull-right">
                <!-- Tabs -->
                <ul class="nav panel-tabs">
                    <li><a href="#tab1" data-toggle="tab">B</a></li>
                    <li><a href="#tab2" data-toggle="tab">I</a></li>
                </ul>
            </div>
        </div>
        <!-- ..... -->
    </div>
</div>

y el css

.panel-heading h6.panel-title {
  line-height: 36px;
}

.panel-tabs {
  position: static;
  bottom: auto;
  clear: none;
}
Respondido por: Anonymous

Leave a Reply

Your email address will not be published.