Topic: Why aren't MDB's Bootstrap Tabs behaving as advertised
Having integrated the default nav-tab into my website, it doesn't behave as advertised. Even when isolating every bit of code - surprise surprise it still doesn't work as expected.
The actual behaviour of this is as follows:
The active tab isn't active at all, upon loading the tab with the class "active" is selected but the default active content isnt showing. Why?
Secondly, whenever you click any other tab, the default active tab-pane is clearly open but no content is displayed. This pushes the content of the selected tab downwards. Again, why?
Seriously beginning to lose my temper with this, if anyone can use the code below and recreate this problem, then see if anyone has any explanation as to why this code is behaving like an ill-disciplined child - I'd be most grateful...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Overview How we can help Contact Us Case Studies Overview
</div>
</div>
<div class="col-lg-4 std_box_blue_gradient">
<div class="services-title">Case Study</div>
<div class="services-subtitle">This will be the subtitle here</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="how-tab">
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="container">
<div class="row">
<div class="clearfix">
<div class="col-lg-6">
</div>
<div class="services-subtitle"><strong>Contact Us</strong></div>
<div class="services-subtitle">xxxxxx</div>
<div class="services-subtitle" style="font-size: 10px;">Calls will be recorded for monitoring and training purposes. </div>
<a href="#">Buttomn</a>
</div>
<div class="col-lg-6 pd-services-background">This is the background</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Resources (screenshots, code snippets etc.)
Hi,
would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? It will be easier and faster for me to help you if I will see a real component from code in the snippet.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: Desktop
- Browser: Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: No