CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinternet-explorerfirefox
Martin Schagerl
Martin Schagerl

Reputation: 613

Height 100 percent not working in all browsers

I created a simple Bootstrap "input-group" sample, which works fine in Chrome, but does not work in IE and Firefox.

As you can see in this sample, the "Help" button does not fill the full height of its parent. In Chrome (Version 58) it works as expected.

Upvotes: 0

Views: 1107

Answers (3)

Michael Coker
Michael Coker

Reputation: 53709

The parent needs height: 100%

.input-group {
    width: 100%;
}

.input-group-btn, .outer, .btn {
  height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group outer">
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class ="form-control">Option 1</label>
  </div>
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class ="form-control">Option 2</label>
  </div>
  <div class="input-group-btn">    
    <button class="btn">Help</button>
  </div>
</div>

Upvotes: 0

user4447799
user4447799

Reputation:

Remove padding-top and padding-bottom

.input-group {
  width: 100%;
}

.input-group-btn {
  height: 100%;
}

.btn {
  height: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class="form-control">Option 1</label>
  </div>
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class="form-control">Option 2</label>
  </div>
  <div class="input-group-btn">
    <button class="btn">Help</button>
  </div>
</div>

Upvotes: 1

Benjamin Sch&#252;ller
Benjamin Sch&#252;ller

Reputation: 2189

Please set a height for input-group.

.input-group {
    width: 100%;
    height: 10px;
}

Then it should work like expected.

There is also another good answer for this problem here.

Upvotes: 0

Related Questions