CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
LiveEn
LiveEn

Reputation: 3253

change active tab and tab body color

I have a boostrap tab with each tab and tab content with different colors. So when the user click on a tab it will show the tab content with the appropriate color.

The problem that im having is when the tab is active the tab becomes white instead of its color. Even though i set the .active class to to a different color or transparent it still shows white.

And when the tab is selected how can i make the complete tab body background color is changed to that particular tab color so there is no white space?

https://screenshots.firefox.com/RoLTo0UMRIWJNqfX/jsfiddle.net

Below is my HTML code

<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified trackmy_b">
  <li class="active" style="background:#00ADED"><a data-toggle="tab" href="#tab-1">
 Block 1
  </a></li>
  <li style="background:#757070"><a data-toggle="tab" href="#tab-2">
 Block 2
  </a></li>
  <li style="background:#6F4677"><a data-toggle="tab" href="#tab-3">
  Block 3
  </a></li>
  <li style="background:#FF441F"><a data-toggle="tab" href="#tab-4">
 Block 4
  </a></li>
</ul>

<div class="tab-content" style="display:block">
  <div id="tab-1" class="tab-pane fade in active" style="background:#00ADED">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div style="background:#757070" id="tab-2" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="tab-3" style="background:#6F4677" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
   <div id="tab-4" style="background:#FF441F" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

I have created a fiddle https://jsfiddle.net/livewirerules/e9rj0kwa/2/

Any help will be appreciated

Upvotes: 0

Views: 1806

Answers (2)

Temani Afif
Temani Afif

Reputation: 272909

You are facing collapsing margin issue. Inside the content of your tab you have a h3 element with margin-top collapsing with the tab and thus applyed to the tab which creating a gap between tab an navigation (the white space you are having). To fix this you can add a small padding-top to tab (or remove this margin).

.tab-content>.tab-pane {
  padding-top:1px;
}

Here is a full code :

.nav-tabs>li>a:hover {
  background-color: transparent!important;
}

.tab-content>.tab-pane {
  padding-top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified trackmy_b">
  <li class="active" style="background:#00ADED"><a data-toggle="tab" href="#tab-1">
 Block 1
  </a></li>
  <li style="background:#757070"><a data-toggle="tab" href="#tab-2">
 Block 2
  </a></li>
  <li style="background:#6F4677"><a data-toggle="tab" href="#tab-3">
  Block 3
  </a></li>
  <li style="background:#FF441F"><a data-toggle="tab" href="#tab-4">
 Block 4
  </a></li>
</ul>

<div class="tab-content" style="display:block">
  <div id="tab-1" class="tab-pane fade in active" style="background:#00ADED">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div style="background:#757070" id="tab-2" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="tab-3" style="background:#6F4677" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
  <div id="tab-4" style="background:#FF441F" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Upvotes: 1

sol
sol

Reputation: 22949

For the issue with tab colours, you need to override bootstrap css. You can try this css:

li.active>a {
  background-color: initial !important;
}

The margin-top of the h3 is creating the white space. Remove that, and if you want, replace with padding to maintain the spacing.

To make the tab content the rest of the document height, you can use calc(). Subtract the height of the tabs from the viewport.

fiddle

.nav-tabs>li:hover > a {
  background-color: transparent!important;
}

li.active>a {
  background-color: initial !important;
}

.tab-content div[id^="tab"]>h3 {
  margin-top: 0;
  padding-top: 20px;
}

.tab-content  div[id^="tab"] {
 height: calc(100vh - 42px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified trackmy_b">
  <li class="active" style="background:#00ADED"><a data-toggle="tab" href="#tab-1">
 Block 1
  </a></li>
  <li style="background:#757070"><a data-toggle="tab" href="#tab-2">
 Block 2
  </a></li>
  <li style="background:#6F4677"><a data-toggle="tab" href="#tab-3">
  Block 3
  </a></li>
  <li style="background:#FF441F"><a data-toggle="tab" href="#tab-4">
 Block 4
  </a></li>
</ul>

<div class="tab-content" style="display:block">
  <div id="tab-1" class="tab-pane fade in active" style="background:#00ADED">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div style="background:#757070" id="tab-2" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="tab-3" style="background:#6F4677" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
  <div id="tab-4" style="background:#FF441F" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Upvotes: 1

Related Questions