Bootstrap-datetimepicker plugin opens a box that is staying under the accordion. How to make it visible on the top of the accordion?
Question
I am trying to use bootstrap-datetimepicker for bootstrap 4 but when i use it in accordion. it is not showing up all of its box . The box for selecting date is under the card body. I tried positioning but not succeeded. I don't know about how to fix it ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" /> </head> <body> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <div class="container"> <div style="position: relative" id="global-container"> <div style="position: relative; z-index: 1" id="container-1"> <div style="position: relative; z-index: 50" id="content-1"> <div class="input-group date datetimepicker" id="d1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#d1" value="01.01.1992" /> <div class="input-group-append" data-target="#d1" data-toggle="datetimepicker"> <div class="input-group-text"> <i class="fa fa-calendar"></i> </div> </div> </div> </div> </div> <div style="position: relative; z-index: 2" id="container-2"> <div style="position: relative; z-index: 2" id="content-2"> <div class="input-group date datetimepicker" id="d2" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#d2" value="01.01.1992" /> <div class="input-group-append" data-target="#d2" data-toggle="datetimepicker"> <div class="input-group-text"> <i class="fa fa-calendar"></i> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <div class="input-group date datetimepicker" id="d3" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#d3" value="01.01.1992" /> <div class="input-group-append" data-target="#d3" data-toggle="datetimepicker"> <div class="input-group-text"> <i class="fa fa-calendar"></i> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function() { $(".datetimepicker").datetimepicker({ format: "DD.MM.YYYY", locale: "tr", }); }); </script> </body> </html>
codepen : https://codepen.io/mhdikmen0/pen/dyzqJbr
1 answers
solution1
0 2021-11-16 22:06:39
I'm not sure why you've applied z-index values to the surrounding elements, but removing those seems to help.
Inline styles are rarely a good idea. I'd remove all those position rules, also.
$(document).ready(function() { $(".datetimepicker").datetimepicker({ format: "DD.MM.YYYY", locale: "tr" }); });
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" /> </head> <body> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <div class="container"> <div style="position: relative" id="global-container"> <div style="position: relative;" id="container-1"> <div style="position: relative;" id="content-1"> <div class="input-group date datetimepicker" id="d1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#d1" value="01.01.1992" /> <div class="input-group-append" data-target="#d1" data-toggle="datetimepicker"> <div class="input-group-text"> <i class="fa fa-calendar"></i> </div> </div> </div> </div> </div> <div style="position: relative;" id="container-2"> <div style="position: relative;" id="content-2"> <div class="input-group date datetimepicker" id="d2" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#d2" value="01.01.1992" /> <div class="input-group-append" data-target="#d2" data-toggle="datetimepicker"> <div class="input-group-text"> <i class="fa fa-calendar"></i> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <div class="input-group date datetimepicker" id="d3" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#d3" value="01.01.1992" /> <div class="input-group-append" data-target="#d3" data-toggle="datetimepicker"> <div class="input-group-text"> <i class="fa fa-calendar"></i> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script --> <script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap/JQuery Accordion. Button Classes
Accordion JS Problem - when click it opens to the bottom of the accordion instead of staying at top where i clicked
jQuery accordion. Clicking on content of higher section opens lower section
how to center a div inside a div bootstrap collapse accordion. Collapse inside collapse how to center
Bootstrap: Dropdown on top of accordion
How to Minimize ngx-bootstrap Accordion box?
How to make dropdownlist in accordion using bootstrap?
Bootstrap 3: How to make accordion panels as long as the text in it?
how to make a responsive accordion layout using bootstrap 3?
Bootstrap collapse and accordion opens to side, not underneath
Related Tags