0

I am using bootstrap Clock Picker plugin. When I use picker in modal, it is not auto adjusting when it is in bottom of the modal. so that I am not able to view the picker completely. When it is in the bottom of the page, it should come on top of the text field automatically. Please help. I am not able to fix. Please suggest. Thanks in Advance.

Haseeb Ibrar
  • 337
  • 5
  • 18
Goutham
  • 27
  • 7

2 Answers2

1

use this code to fix your issue.

sometimes when you are multiple layers of Div or any Tags. then this type of issue comes or some CSS code of an Element always force to come in top or Front. then that case this example will very helpful. In some solutions to this problem, I saw some developers used different codes like they are finding DIV Class name and setting Z-index. that also works.

.popover {
     z-index: 215000000 !important;
 }
pankaj
  • 1
  • 17
  • 36
  • While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Adrian Mole Mar 22 '20 at 21:44
0

When you use clock picker in modal then you will be not able to view it because of the z-index of the modal, you have to give z-index to clockpicker also as below, please add this below style in your css.

.clockpicker-popover { z-index: 999999; }

Haritsinh Gohil
  • 5,818
  • 48
  • 50
  • try to increase the `z-index` or if it don't work inspect the clock picker and see the `popover` class name is same as here, if not change the class name as per yours. – Haritsinh Gohil Aug 03 '19 at 07:04