Topic: Problem date picker with Tab (nav-tab) "tab-content card"

dmstudios pro asked 5 years ago


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>

Kamil Paciepnik free answered 5 years ago


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

dmstudios pro answered 5 years ago


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

Kamil Paciepnik free answered 5 years ago


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>
Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags