search

owsolutions / amazing-time-picker

Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material
138 stars 76 forks source link

TimePicker in boostrap modals #71

Open noyessie opened 6 years ago

noyessie commented 6 years ago

When i'm use time picker in boostrap modal, it appear under the modal box.

How can i bring it in front of dialog ?

tiesong commented 6 years ago

I implemented in Angular 5.2.0. You can see in browser inspect , timepicker default css is following :

time-picker-wrapper[_ngcontent-c12] {

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
-webkit-transition: background 0.4s;
transition: background 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 1000;

}

So, please try like this in anycomponent.ts file. (document.querySelector('#time-picker-wrapper') as HTMLElement).style.zIndex = '1500'; if modal dialog's z-Index is higher than 1500 then zIndex can be set higher than 1500. I am sure this will help.

kerimdragolj commented 6 years ago

I had same problem, solved it by putting z-index: 1100 on #time-picker-wrapper since z-index of modal is 1050 if im correct.