Problem with panel and Bootstrap form

Question

Problem with panel and Bootstrap form

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

By placing tabs in panel-title , the form I have in panel-primary reaches the limit where the tabs start.

The problem is this class: <div class="pull-right"> . If I remove it, my form takes all the space of the panel-primary but the tabs are pasted to the left on the title.

This is my code:

/*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>

html5 css bootstrap

asked by damianlema 24.07.2016 в 03:58

source

2 answers

1

Thank you very much for your response.

Your option worked for me, just as I continued to investigate and the solution was in the class of the div which the button tab calls

<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>

This is the div that is shown for the first tab of the tab

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

For the div of the second tab I just had to add the class "active" and it works perfectly

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

Again, thank you very much for your answer

Greetings

answered by 28.07.2016 в 17:14

Location mapsforge Fill in form data from an object - Using Javascript

score 0 · Accepted Answer

A quick solution (depending on what you want) is to float the h6 on the left (pull-left class) that is at the same level as the tabs container, and apply the clearfix class to the element that contains them.

The rest are minimum position adjustments such as making the two elements have the same line-height and not using the relative positioning for the 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>

and the css

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

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