CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Ivanka Todorova
Ivanka Todorova

Reputation: 10219

.form-group to have the height of the element inside

I want to set border-right: 1px solid #2e2e2e to a .form-group element, but it doesn't match the height of its content and it looks ugly.

Here's a demo:

/* My styles */

.form-group {
  border-right: 1px solid #2e2e2e;
  padding: 0 10px;
}

.bootstrap-select.btn-group .dropdown-toggle {
    padding: 15px 40px 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>

  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>
  <button type="submit" class="btn btn-info">Send</button>
</form>

Edit: Run it in Full page mode.

Upvotes: 0

Views: 5863

Answers (5)

andy
andy

Reputation: 1

No sure if this will help anyone, but I have run into issues where the .form-group class does not want to have a dynamic height. Adding height: auto to .form-group will fix this.

Upvotes: 0

sree
sree

Reputation: 115

set margin-bottom:15px; for the div inside .form-group

Upvotes: 0

user6634178
user6634178

Reputation:

use the below code, hope it works

.form-group{
	border-right:1px solid #000;
	padding-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>

  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>
  <button type="submit" class="btn btn-info">Send</button>
</form>

watch in big screen

Upvotes: 0

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

float:left of the child elements and fixed height of your bootstrap-select are causing this issue.

Code Snippet

/* My styles */

.form-group {
  border-right: 1px solid #2e2e2e;
  padding: 0 10px;
}
.bootstrap-select.btn-group .dropdown-toggle {
  padding: 15px 40px 15px 0;
}
.mycustomform {} .mycustomform .btn-group {
  height: auto;
}
.mycustomform .form-group::before,
.mycustomform .btn-group::before {
  content: "";
  display: table;
}
.mycustomform {} .mycustomform .form-group::after,
.mycustomform .btn-group::after {
  content: "";
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline mycustomform">
  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>

  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>
  <button type="submit" class="btn btn-info">Send</button>
</form>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Set height:auto; to .form-control

Upvotes: 3

Related Questions