Topic: Problem date picker with Tab (nav-tab) "tab-content card"
When using the Tab (nav-tab) component with "tab-content card", with the date picker, the calendar is below the Nav tabs.
I am using Version: MDB PRO 4.3.1
How can I solve that problem?
Thank you
Andrés Rodríguez
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Start your project here--><br><br><br><br><br><br>
<div class="row">
<div class="col-lg-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-4 orange darken-3" role="tablist">
<li class="nav-item">
<i class="fa fa-address-book fa-lg" aria-hidden="true"></i><br>
Identificación
<li class="nav-item">
<i class="fa fa-user-circle-o fa-lg" aria-hidden="true"></i><br>
Personal
<li class="nav-item">
<i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i><br>
Aplicaciones asociadas
<li class="nav-item">
<i class="fa fa-laptop fa-lg" aria-hidden="true"></i><br>
Equipamiento físico
<!-- Tab panels -->
<div class="tab-content card">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="panel1" role="tabpanel">
<br>
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
<label for="date-picker-example">Try me...</label>
</div>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel2" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel4" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 4-->
</div>
</div>
</div>
<!-- /Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
$(document).ready(function() {
$('.mdb-select').material_select();
$('.datepicker').pickadate();
});
</script>
</body>
</html>
Add comment
Thank you for reporting this error. As soon as possible we will try to fix it and add it to the documentation and your topic.
Regards
Thank's
The code you send me does not work.
Send link to the example of the error when using the date picker with Tab (nav-tab) "tab-content card"
http://www.dmstudios.cl/clientes/mdb/error.png
When using the Tab (nav-tab) component with “tab-content card”, with the date picker, the calendar is below the Nav tabs.
http://www.dmstudios.cl/clientes/mdb/index-problem.html
Regards
Hi dmstudios,
try use this code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!– Font Awesome –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!– Bootstrap core CSS –>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!– Material Design Bootstrap –>
<link href="css/mdb.min.css" rel="stylesheet">
<!– Your custom styles (optional) –>
<link href="css/style.css" rel="stylesheet"> </head>
<body>
<!– Start your project here–>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-12">
<!– Nav tabs –>
<ul class="nav nav-tabs tabs-4 orange darken-3" role="tablist">
<li class="nav-item"> <i class="fa fa-address-book fa-lg" aria-hidden="true"></i>
<br> Identificación
<li class="nav-item"> <i class="fa fa-user-circle-o fa-lg" aria-hidden="true"></i>
<br> Personal
<li class="nav-item"> <i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i>
<br> Aplicaciones asociadas
<li class="nav-item"> <i class="fa fa-laptop fa-lg" aria-hidden="true"></i>
<br> Equipamiento físico
<!– Tab panels –>
<div class="tab-content card">
<!–Panel 1–>
<div class="tab-pane fade in show active" id="panel1" role="tabpanel">
<br>
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
<label for="date-picker-example">Try me…</label>
</div>
</div>
<!–/.Panel 1–>
<!–Panel 2–>
<div class="tab-pane fade" id="panel2" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!–/.Panel 2–>
<!–Panel 3–>
<div class="tab-pane fade" id="panel3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!–/.Panel 3–>
<!–Panel 4–>
<div class="tab-pane fade" id="panel4" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!–/.Panel 4–>
</div>
</div>
</div>
<!– /Start your project here–>
<!– SCRIPTS –>
<!– JQuery –>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!– Bootstrap tooltips –>
<script type="text/javascript" src="js/tether.min.js"></script>
<!– Bootstrap core JavaScript –>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!– MDB core JavaScript –>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
$('.mdb-select').material_select();
$('.datepicker').pickadate();
</script>
</body>
</html>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags