Cannot set the width of of KendoUi Widgets Via CSS

3 posts, 0 answers
  1. Greg
    Greg avatar
    1 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2012 Link to this post

    I am having some trouble setting the widths of KendoUi Widgets via either a css class or the style="width:  "

    Below is a sample of some code from an MVC test project I am working. The date picker control is being rendered the entire width of the screen. The only way I can can get it to size correctly is by limiting the width of the parent element. Is this the the only way sizing of the widget can be controlled. Thanks.

    <br><div><br>    <input id="dateTest" style="width: 200px" /></div><br>@Html.Telerik().ScriptRegistrar().OnDocumentReady(" $('#dateTest').kendoDatePicker();")


  2. Nilhan
    Nilhan avatar
    3 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2012 Link to this post

    I'm having the same issue here. There's no clean way to set width of DatePicker.
    The documentation provides no help at all regarding this.

    Kendo team, please provide a solution!
  3. Greg Horvath
    Greg Horvath avatar
    9 posts
    Member since:
    Aug 2009

    Posted 30 Jul 2012 Link to this post

    I figured out my issue. The kendoDatePicker function was getting called twice on the element. The second call to it removes all the width formating. If you only call it once it takes the width set via css or the style attribute. The problem was this line

    @Html.Telerik().ScriptRegistrar().OnDocumentReady(" $('#dateTest').kendoDatePicker();")

    It needed to be @{Html.Telerik().ScriptRegistrar().OnDocumentReady(" $('#dateTest').kendoDatePicker();")}
    so it did not emit a second script registrar to the output.
Back to Top