jquery - KendoUI日期选择器输入字段显示问题

希望我在这里提供的内容足以帮助我解决显示方面的问题。




  您可以在以下位置查看此操作：http://dev.skoovy.com
  用户名：[email protected]
  密码：test123


它是页面顶部的表单。这是一个开发中的站点。



当我设置一个提供日期选择器的输入字段时，它将更改输入字段以在日历图标旁边包含此添加的区域。我不知道为什么会这样。

这是初始化日期选择器后的样子。用红笔突出显示的区域是我要修复的区域。



而且，这是没有初始化日期选择器的情况。



这是从Chrome中的调试器窗格复制的HTML（通过元素选择器）

<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>
&nbsp;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;
}

最佳答案

您应该更改输入字段的最大宽度

.headersearch-flex-container .searchfld.flex-item:nth-child(2) input {
  width: 90px;
  max-width: 110px;
  min-width: 80px;
}

关于jquery - KendoUI日期选择器输入字段显示问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21316557/