Надеюсь, что я предоставил здесь, будет достаточно, чтобы помочь мне в вопросе отображения, который у меня есть.KendoUI datepicker поле ввода дисплея
Вы можете увидеть это в действии: http://dev.skoovy.com Имя пользователя: [email protected] Пароль: test123
Это форма в верхней части стр. Это сайт разработки.
Когда я создать поле ввода, чтобы обеспечить DatePicker, он изменяет поле ввода, чтобы содержать эту добавленную область рядом со значком календаря. Я не могу понять, почему это происходит.
Вот как это выглядит с инициализацией datepicker. Области, выделенные красным пером, я пытаюсь исправить.
И вот что он lookslike без DatePicker инициализации.
Здесь, как HTML-скопированы из панели отладчика в Chrome (с помощью селектора элементов)
<div class="when_range_input" style="display: block;">
Start: <span class="k-widget k-datepicker k-header" style=""><span class="k-picker-wrap k-state-default"><input type="text" id="when_range_start" name="wv_drs" value="" data-role="datepicker" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-owns="when_range_start_dateview" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is null" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="when_range_start_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>
End: <span class="k-widget k-datepicker k-header" style=""><span class="k-picker-wrap k-state-default"><input type="text" id="when_range_end" name="wv_dre" value="" data-role="datepicker" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-owns="when_range_end_dateview" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is null" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="when_range_end_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>
</div>
Вот CSS я использую:
.when_range_input {
display:none;
position:absolute;
width:350px;
/** margin-left:320px; **/
border-color:#ffcc00;
padding:5px;
z-index:9999;
font-size:11px;
-webkit-box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.55);
-moz-box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.55);
box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:#ffffff;
}
.when_range_input input[type="text"] {
background-color: #fff;
border-color: #e2e2e2;
border-style: solid;
border-width: 1px;
font-size: 11px;
color: #b8b8b8;
padding: 2px 1px 2px 1px;
line-height: 15px;
height: 20px;
}
Пожалуйста, предоставьте нам демо-ссылку –
я обновил пост, чтобы включить ссылку и войдите на сайт устр. – kambythet