Bootstrap datetimepicker z-index

Question

Bootstrap datetimepicker z-index

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

I'm opening a datetimepicker in a modal but when I open the picker it stays behind:

I have put the z-index property in the css but it does not work for me.

 <div class="form-group is-empty">
                                <label class="col-md-4 control-label" for="t_ejecucion">Tiempo ejecución: </label>
                                <div class="col-md-8">
                                    <div class="input-group date">
                                        <input type="text" class="form-control" id="t_ejecucion"
                                               style="margin-top: 15px;">
                                    </div>
                                </div>
                            </div>


$('#t_ejecucion').datetimepicker({
            format: 'LT'
        })

I am using link which includes link apart from bootstrap and jquery.

javascript jquery bootstrap

asked by Lina Cortés 15.02.2017 в 05:48

source

2 answers

How not to detect upper case in Python 3.5 Event similar to c # keyDown that can be applied on Android

score 1 · Answer 1

If you are including the styles of the datepicker after the bootstrap styles (which is how I suppose you are doing it) then what you would be missing would be to give a background-color property to the element, rather than modifying the zIndex.

Edit : I now understand that the box is not the edge of the datepicker but that you put it (doh!).

The modal zIndex has no way of overlaying the title if it does not have the property position set to relative or absolute and is contained in an element which in turn has that property.

In your case, you would have to give position: relative and zIndex to the form that contains the modal.

If that does not work, check in chrome devtools exactly which container the modal is added to, and play with the position and zIndex of that container. The idea is that everything that protrudes from the container has a higher zIndex than the title.

If that does not work, it may simply be that your container (in this case the form) has the property overflow set in hidden which is why it hides any part that sticks out of it. From your image, I could not tell if this is what happens.

score 0 · Answer 2

Maybe you did not include the property:

position:absolute in your styles

So that the div is free and can be overlaid with z-index: +1

Of course then you will have to position your div, because when you make the absolute position, the div will be floating and you will have to add position restrictions.