Bootstrap horizontal form with left floated side tabs

Question

I am trying to put a horizontal form inside of a section with left tabbing. The problem that I cannot seem to beat is that since the tab-left is created by floating the <ul> left, and the .form-group's are grouped by clearing similar to .clearfix, means that the first form-group will clear the left tabs as well, causing the next form-group to be positioned way off.

Snippet: http://www.codeply.com/go/zdjODkN7uu

I am wondering if it is possible to sort of 'remove' the clearfix for the form-group's or otherwise correctly contain the form within the tab-contents section? Thanks for any help.

score 0 · Accepted Answer · answered Aug 25 '15 at 01:24

Maybe this will work or help you figure out what you need. It's basically just using columns to hold the tabs.

/* left tab styles (was removed from bootstrap 3)
  pulled from http://stackoverflow.com/a/18443236 and http://www.bootply.com/74926 */

.tabs-left .nav-tabs {
  height: 100%;
  border-bottom: 0;
  padding-top: 50px;
}
.tabs-left .nav-tabs li {
  float: none;
}
.tabs-left .nav-tabs li a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}
.tabs-left .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}
.tabs-left .nav-tabs li a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
.tabs-left .nav-tabs li a:hover,
.tabs-left .nav-tabs li a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left .nav-tabs .active a,
.tabs-left .nav-tabs .active a:hover,
.tabs-left .nav-tabs .active a:focus {
  border-color: #ddd transparent #ddd #ddd;
  border-right-color: #ffffff;
}
@media (max-width: 360px) {
  .tab-pane {
    margin-left: 35px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<hr/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#paymentPlan" data-toggle="tab">Setup a Payment Plan</a>

          </li>
          <li><a href="#reports" data-toggle="tab">Reports</a>

          </li>
        </ul>
      </div>
    </div>
    <div class="col-xs-9">
      <div class="tab-content">
        <div class="tab-pane active" id="paymentPlan">
          <form class="form-horizontal" id="tabForm">
            <div class="form-group">
              <label for="system" class="col-sm-2 control-label" translate>System:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="system" />
              </div>
            </div>
            <div class="form-group">
              <label for="company" class="col-sm-2 control-label" translate>Company:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="company" />
              </div>
            </div>
          </form>
        </div>
        <div class="tab-pane" id="reports">
          <div class="well">Yup</div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr/>

Bootstrap horizontal form with left floated side tabs

1 Answers1