Calendar position bug or problem


I my goal is to build text input for dates and I want to have pop-up calendar, which opens and closes by clicking on calendar icon next to the text input. Everything works fine except the pop-up calendar’s position. Calendar’s background and header seems to be in ride place but the content of the calendar (days, weekdays, months, years and month navigation images) are out of the calendar’s background. What I do wrong?

Here is my code:


please check that there are no css classes that can redefine other classes.

The working sample is attached (37.8 KB)


Have you any experience what kind of style definitions can mess up display of the pop-up calendar?


some global classes can cause this issue. For example css class for body or div. Please, provide the complete demo where we can recreate the issue


I found the css code, which messed up calendar’s display. The calendar was inside a table, which had following style class:

.classname td
    border: 1px solid gray;
    padding: 5px;
    vertical-align: top;

So that probably affected also calendar’s td tags.


calendar has several tables in it. So, this class can break calendar styles.