label for form elements

2 posts, 0 answers
  1. Morten
    Morten avatar
    336 posts
    Member since:
    Jul 2012

    Posted 26 Aug 2013 Link to this post

    How do I have my form input elements "kendo styled" without having to add then to a <ul><li> element and how do I have the label on top?

    http://docs.kendoui.com/getting-started/mobile/forms says that most  form elements are supported and styled if added to a mobile view.
    However, only if I add form input elements into a <ul><li> hierarchy are they styled automatically:

    Styled:
    <div data-role="view" data-layout="layout1" data-title="Sign in" id="signin-view">
      <ul data-role="listview" data-style="inset">
        <li>
          <label>Username<input id="txtUsername" type="text" data-bind="value: username" /></label>
        </li>

    Not styled:
    <div data-role="view" data-layout="layout1" data-title="Sign in" id="signin-view">
    <input id="txtUsername" type="text" data-bind="value: username" />
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 28 Aug 2013 Link to this post

    Hi Morten,

    Kendo UI Mobile provides automatic platform dependent styling of form elements when they are added to a view. The difference between the two code samples that you shared is that in the first sample there is also a Kendo UI Mobile ListView widget defined that provides some more styling for the application:

    <ul data-role="listview" data-style="inset">

    You can check the ListView widget on the following link:

    http://demos.kendoui.com/mobile/listview/index.html#/

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top