k-input and style=width:100% added to surrounding span

[Ed]

I've got two different date pickers in my app, in different parts of the same page, and when I construct them, I am using the same options, but one of them has the "k-input" class added and style set to width:100%, while the second has neither of those - this is on the span containing the following classes: k-widget k-datepicker k-header.

In what situations is the k-input class added and the width: 100% added to this span surrounding the input element - and how do I prevent these from being added?

<input id="postingStartDate" placeholder="@Common.PostingStartDate" value="@Model.StartDate"/>
<input id="transactionStartDate" placeholder="@Common.StartDate" value="" />

and the javascript is:

$("#transactionStartDate").kendoDatePicker();
$("#postingStartDate").kendoDatePicker();

resulting in:

<span class="k-widget k-datepicker k-header k-input" style="width: 100%;"><span class="k-picker-wrap k-state-default"><input id="postingStartDate" placeholder="Posting Start Date" value="11/17/2010 9:02:41 PM" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="postingStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="postingStartDateLabel" aria-describedby="postingStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="postingStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>

<span class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default k-state-hover"><input id="transactionStartDate" placeholder="Start Date" value="" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="transactionStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="transactionStartDateLabel" aria-describedby="transactionStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="transactionStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>

 

Thanks,

--Ed

[Dimiter Topalov]

Hi Ed,

The described issue can occur if the widget is initialized twice, which is not recommended.

During the second initialization, the styles and classes from the <input> are copied to the widget wrapper and this causes the observed result.

The recommended way to prevent the problem is to find and remove the duplicate initialization from the code. If the implementation doesn't allow such a solution, you can check whether a widget instance already exists (as shown in the documentation example) and create a new one only if needed.

I hope this helps.

Regards,
Dimiter Topalov
Telerik