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

2 posts, 1 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 17 Nov 2015 Link to this post

    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:


    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>




  2. Answer
    Dimiter Topalov
    Dimiter Topalov avatar
    628 posts

    Posted 19 Nov 2015 Link to this post

    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.

    Dimiter Topalov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top