KendoUI datepicker input field display issue

Problem

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.

input fields with datepicker initialized

And, here is what it lookslike without datepicker initialized.

enter image description here

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;
}
Problem courtesy of: kambythet

Solution

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;
}
Solution courtesy of: Vangel Tzo

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.