Form fields are invisible

3 posts, 0 answers
  1. Stan
    Stan avatar
    2 posts
    Member since:
    Nov 2014

    Posted 21 Nov 2014 Link to this post

    I am brand new to this so bear with me. I'm building my first mobile app with Kendo and the first "view" I'm creating is the logon form.  I've followed the example in the user guide under the topic "Mobile forms support". The only thing I did different was close the label tags before the input fields. I'm not sure why the example had the input fields inside the labels. Nonetheless, I chose the kendo.mobile.ios.min.css theme for my application. Well, the form doesn't look right at all and it's probably something I'm doing wrong. I've attached a screenshot of what the form looks like. I can't tell where the input fields are without blindly tapping to the right of the label until I see a blinking cursor. Do I need to handle the styling of the form fields myself, regardless of which theme I use?

    <form action="login">
      <ul data-role="listview" data-style="inset">
        <li>
          <label>User ID:</label>
          <input name="userId" type="text" />                        
        </li>
        <li>
          <label>Password:</label>
          <input name="password" type="password"/>
        </li>
      </ul>
    </form>
  2. Stan
    Stan avatar
    2 posts
    Member since:
    Nov 2014

    Posted 21 Nov 2014 in reply to Stan Link to this post

    Ok I understand about the labels enclosing the form elements. Obviously I've been away from hand-coding forms for awhile. However, the form fields still don't have borders. I found a demo here http://demos.telerik.com/kendo-ui/mobile-forms/index and the form fields don't have borders there either. So maybe that is the default with Kendo? Any app on my phone that requires me to log in definitely shows the form fields. Maybe I'm old fashioned but I really can't get my head around having to tap on the screen to find the form field.
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 25 Nov 2014 Link to this post

    Hello Stan,

    this is correct - the styling is intentional, and follows the look of the forms in iOS. The labels enclose the inputs, so that tapping anywhere in the row focuses the input. You can check how the iOS forms work in the default iOS apps (like settings, for example). 

    If you find that behavior not suitable for your app, you can override the styling of the inputs (restore their borders, for example), or use another skin, like the flat one. 

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