Search code examples
jquerycssdatepickeroverlap

Jquery datepiker overlaps by div

pls help. I added datepicker from jquery default library. But some with overlap it when it is open. Customize css? Thanks to all...

opened datepicker closed datepicker

Solution

  • set the background color of the picker to white or you can use an 1 pixel white image for the background which will repeat and fill the datepicker div

    for example if your div has a css class say ui-datepicker

    Then you can use the below css

     .ui-datepicker{
     background-color: #ffffff;
 }

    I assumed the class as ui-datepicker you need to find the css class by yourself

    in jQueryUI the CSS class usually will be ui-datepicker

    I would imagine that you have bootstrap css and jquery css mixed together, if that is the case

    Then, re-order the CSS inclusion and make the jQueryUI CSS appear last

    If the buttons are not clickable then the z-Index is overridden by another div tag

    change the z-index

    .ui-datepicker{
  z-index: 99999;
}