1

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:

/*Panel tabs*/
.panel-tabs {
  position: relative;
  bottom: 30px;
  clear:both;
  border-bottom: 1px solid transparent;
}

.panel-tabs > li {
  float: left;
  margin-bottom: -1px;
}

.panel-tabs > li > a {
  margin-right: 2px;
  margin-top: 4px;
  line-height: .85;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  color: #ffffff;
}

.panel-tabs > li > a:hover {
  border-color: transparent;
  color: #ffffff;
  background-color: transparent;
}

.panel-tabs > li.active > a,
.panel-tabs > li.active > a:hover,
.panel-tabs > li.active > a:focus {
  color: #fff;
  cursor: default;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: rgba(255,255,255, .23);
  border-bottom-color: transparent;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class='container'>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h6 class="panel-title" style=" font-size: 12px;">Traslados Presupuestarios</h6>
      <!-- SI COLOCO ESTA CLASE EN EL DIV, TODO EL RESTO DEL FORMULARIO SE CORRE A LA IZQUIERDA -->
      <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>
    <form class="form-horizontal">
      <fieldset>
        <div class="row">
          <div class="col-md-2" align="right">
            <label for="inputEmail" class="control-label">Número de Solicitud</label>
          </div>
          <div class="col-md-2">
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">
          </div>
          <div class="col-md-1" align="right">
            <label for="inputEmail" class="control-label">Fecha</label>
          </div>
          <div class="col-lg-2">
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">
          </div>
          <div class="col-md-1" align="right">
            <label for="inputEmail" class="control-label"></label>
          </div>
          <div class="col-md-2" align="right">
            <label for="inputEmail" class="control-label">Disminuciones Bs.</label>
          </div>
          <div class="col-lg-2">
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">
          </div>
        </div>
        <div class="row">
          <div class="col-md-2" align="right">
            <label for="textArea" class="control-label">Concepto</label>
          </div>
          <div class="col-md-10">
            <textarea class="form-control" rows="2" id="textArea" placeholder="Email" style="font-size:11px;"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" align="center">
            <button type="reset" class="btn btn-default btn-sm">Nuevo</button>
            <button type="submit" class="btn btn-primary btn-sm">Siguiente</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>

2
  • ¿Qué quieres hacer exactamente? Si lo que quieres es que el formulario ocupe todo el ancho solo tienes que poner un clear:both en la etiqueta form.
    – user7176
    Commented el 26 jul. 2016 a las 9:18
  • Muchas gracias por tu comentario. Investigando encontré la solución a mi problema, (la agrego como respuesta a mi pregunta). Nuevamente, muchas gracias
    – damianlema
    Commented el 28 jul. 2016 a las 15:40

2 respuestas 2

0

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;
}
0

Muchas gracias por tu respuesta.

Tu opción me funciono, igual seguí investigando y la solución estaba en la clase del div al cual llama el boton tab

<div class="container" id="divTablas" style="display: none">
	<ul class="nav nav-tabs" style="margin-top: -14px">
	  <li class="active">
	  	<a href="#disminuir" data-toggle="tab" aria-expanded="true">Disminuir</a>
	  </li>
	  <li class="">
	  	<a href="#aumentar" data-toggle="tab" aria-expanded="true">Aumentar</a>
	  </li>
	</ul>
	<div id="myTabContent" class="tab-content">
	  	<div class="tab-pane fade active in" id="disminuir">
          ..
          ..
        </div>
        <div class="tab-pane fade active" id="aumentar">
          ..
          ..
        </div>
    </div>
</div>

Este es el div que se muestra para la primera pestaña del tab

<div class="tab-pane fade active in" id="disminuir">

Para el div de la segunda pestaña solo tuve que agregarle la clase "active" y me funciona perfectamente

<div class="tab-pane fade active" id="aumentar">

De nuevo, muchas gracias por tu respuesta

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.