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

Question

Hopefully what I provide here will be sufficient to assist me in a display issue I'm having.

---

You can see this in action at: http://dev.skoovy.com Username: test@test.com Password: test123

It's the form at the top of the page. This is an in development site.

---

When I set up an input field to provide a datepicker, it changes the input field to contain this added area next to the calendar icon. I cannot find out why this is happening.

Here is what it looks like with datepicker initialized. The areas highlighted with the red pen are what I'm trying to fix.

And, here is what it lookslike without datepicker initialized.

Here is the HTML as copied from the debugger pane in Chrome (via element selector)

<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>

Here is the css I'm using:

.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;
}

Answer 1

You should change the max-width of the input field

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