css - Angular DatePicker overlapping with the bootstrap modal window -
i trying render angular datepicker in bootstrap's modal window. calendar getting clipped.
attached screenshot same.
i tried fix z-index. failed badly.
pre-conditions :
the header , footer of modal fixed.
only modal -body scroll.
the modal-body have max-height occupy remaining height of browser
the content in modal may increase or decrease. hence modal extend utilize remaining browser height scrollbar content.
as <uib-datepicker>
has fixed size , cannot resized, can customize size of small buttons (days).
for example define .custom-size .btn-sm
css rule:
.custom-size .btn-sm { padding: 4px 8px; font-size: 11px; line-height: 1.5; border-radius: 3px; }
and apply custom-size
class uib-datepicker:
<uib-datepicker ng-model="dateto" starting-day="1" min-date="datefrom" show-weeks="false" class="custom-size"></uib-datepicker>
Comments
Post a Comment