Hej. Robię właśnie tutorial na temat tego jak zrobić kalendarz w javascripcie i postępuję zgodnie z zaleceniami, po czym pojawia się dziwny problem, z którego nie mam jak wybrnąć.
Napisałem HTML, żeby rozpisać pole formularza
<div class="input-calendar-cnt">
<input type="text" class="input-calendar">
<div class="calendar">
(...) tu są dalej przyciski, pole obecnej daty oraz poszczególne tabelki dni miesiąca
</div></div>
Ostylowuję to tak
/* wrapper dla inputa kalendarza */
.input-calendar-cnt {
position: relative;
display: inline-block;
}
/* input kalendarza */
.input-calendar {
background-image: url(../css/calendar-icon1.png);
background-position: 99% center;
background-repeat: no-repeat;
border:1px solid #ddd;
cursor:pointer;
}
/* kalendarz */
.calendar {
position: absolute;
top:100%;
left:0;
width: 300px;
background: #fff;
min-height: 300px;
padding: 5px;
border: 1px solid #ddd;
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
font-family: sans-serif;
display: block;
z-index: 100;
}
No i zgodnie z instrukcjami na dwóch stronach, żeby jedno pole chowało się względem drugiego wrapper musi być na pozycji relative, a calendar na pozycji absolute oraz z-index 100 i display:block. Wszystkie wymagania zostały spełnione, a tu lipa... Oba pola są cały czas widoczne. Pole kalendarza cały czas się wyświetla i nie można go zamknąć. Od razu jest widoczne. Co to może powodować? Z góry dzięki za podpowiedzi.