KendoUI datepicker input field display issue

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: [email protected] 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;
}

I have updated the post to include link and login to dev site. — kambythet
– kambythet, Commented Jan 23, 2014 at 18:42

evanzto · Accepted Answer · 2014-01-23 18:57:47Z

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

answered Jan 23, 2014 at 18:57

evanzto

9,3813 gold badges29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

KendoUI datepicker input field display issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related