Search code examples
htmlcssdaterangepicker

daterangepicker is over all items

Please note I am using daterangepicker : (https://cdn.jsdelivr.net/npm/daterangepicker) I had a problem that input all time is over all items (like boostrap Modal or menu )

<div class="col-md-3 form-group">
<div class="picker-carte" style="position:relative;">
<label for="datePicker" class=" control-label">Select date :</label>
 <input type="text" name="datePicker" class="form-control daterangepicker" value="{{$start_date}} - {{$end_date}}" data-start="{{$start_date}}" data-end="{{$end_date}}">
</div>
</div>

I tried :

style="position:relative;"

or the add to class picker-carte:

.picker-carte {
    z-index: 0 !important;
}

the page look : enter image description here

an

enter image description here

Solution

  • it is seems they give to class daterangepicker a x-index = 3001

    I used the below css and it fixed .

    .daterangepicker { 
z-index: 0!important; 
}