Form - touch surfaces are not aligned with widget

6 posts, 0 answers
  1. Didier
    Didier avatar
    4 posts
    Member since:
    Sep 2013

    Posted 12 Sep 2013 Link to this post

    Hello,

    In the simulator, everything looks perfect. But when on Android S2 4.1.2, the touch surfaces are not aligned with the widgets, especially at the end of the form, which is very anoying. Can you help, here is my code.

    Thanks. Didier

    <div id="tabstrip-newEntry" data-role="view" data-title="Form Elements" data-layout="mobile-tabstrip" data-init="initForm" data-use-native-scrolling="true">
                <div data-init="initForm" data-use-native-scrolling="true">
                    <form action="./index.html">
                        <ul data-role="listview" data-style="inset">
                            <li>
                                <label>
                                    Amount
                                    <input type="number" value="" />
                                </label>
                            </li>
                            <li>
                                <label>
                                    From Account
                                    <select>
                                        <option value="First Option">- Choose an account -</option>
                                        <option value="Second Option">UBS</option>
                                        <option value="Third Option">SBS</option>
                                        <option value="Fourth Option">Fourth Option</option>
                                    </select>
                                </label>
                            </li>
                        </ul>
                    </form>
                </div>
                <div data-init="initForm" data-use-native-scrolling="true">
                    <form action="./index.html">

                        <ul data-role="buttongroup" data-index="0" data-style="inset">

                            <li>Standard</li>
                            <li>Transfer</li>

                        </ul>
                    </form>
                </div>
                <div data-init="initForm" data-use-native-scrolling="true">
                    <form action="./index.html">
                        <ul data-role="listview" data-style="inset" >
                            <li>
                                <label>
                                    Account To
                                    <select id="dropdown">
                                        <option value="First Option">First Option</option>
                                        <option value="Second Option">Second Option</option>
                                        <option value="Third Option">Third Option</option>
                                        <option value="Fourth Option">Fourth Option</option>
                                        <option value="First Option">Fifth Option</option>
                                        <option value="Sixth Option">Sixth Option</option>
                                    </select>
                                </label>
                            </li>
                            <li>
                                <label>
                                    Beneficiary
                                    <select id="dropdown">
                                        <option value="First Option">First Option</option>
                                        <option value="Second Option">Second Option</option>
                                        <option value="Third Option">Third Option</option>
                                        <option value="Fourth Option">Fourth Option</option>
                                        <option value="First Option">Fifth Option</option>
                                        <option value="Sixth Option">Sixth Option</option>
                                    </select>
                                </label>
                            </li>
                            <li>
                                <label>
                                    Project
                                    <select id="dropdown">
                                        <option value="First Option">First Option</option>
                                        <option value="Second Option">Second Option</option>
                                        <option value="Third Option">Third Option</option>
                                        <option value="Fourth Option">Fourth Option</option>
                                        <option value="First Option">Fifth Option</option>
                                        <option value="Sixth Option">Sixth Option</option>
                                    </select>
                                </label>
                            </li>
                            <li>
                                <label>
                                    Comment <textarea style="resize: none"></textarea>
                                </label>
                            </li>
                            <li>
                                <label>
                                    Document date
                                    <input type="date" value="2012-03-22" />
                                </label>
                            </li>
                        </ul>
                    </form>
                </div>

                <div data-init="initForm" data-use-native-scrolling="true">
                    <form action="./index.html">
                        <ul data-role="listview" data-style="inset" >
                            <li>
                                <label>
                                    Settled
                                    <input data-role="switch" id="email-switch" checked="checked" />
                                </label>
                            </li>

                        </ul>
                    </form>
                </div>
                
                <br/>
                
                <div data-init="initForm" style="text-align:center;" data-use-native-scrolling="true">
                    <form action="./index.html">
                        <ul data-role="listview" data-style="inset">
                            
                                <a data-role="button" style="background-color: darkred; color: white; ">Delete</a>
                            
                        </ul>
                    </form>
                </div>
            </div>
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 18 Sep 2013 Link to this post

    Hi Didier,

    We're not sure we understand what the problem is without any visuals. Can you take a screenshot from the Icenium Simulator where it looks correct and from the Android device where it does not and attach those here? Additionally have you tested this on more than one Android device?

    I've attached screenshots from Icenium Simulator and Nexus 4 phone (do not have S2 with Android 4.x) as we see it locally.

    Regards,
    Steve
    Telerik

    Big news for mobile app and .NET developers! Hear about it at our Release Keynote. Thursday, September 26th, 11AM EDT
    Do you enjoy Icenium? Vote for it in Windows IT Pro Community Choice Awards as Best Cloud Computing Product or Service (Category 5).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Didier
    Didier avatar
    4 posts
    Member since:
    Sep 2013

    Posted 18 Sep 2013 Link to this post

    Hello Steve,

    Thanks for your answer.

    The problem does only happen on my S2 and not on my S4 Galaxy mini. One difference I noticed, is that due to the screen resolution, on the S2 I have to scroll down to reach the last widgets, which I don't have to do on the S4. And the problem only comes when scrolled down (i.e. the touch surfaces on the last widgets are below the widgets themselves ( So I have to press/swipe in the black zone to reach the widget).

    Thanks for your help.
    Didier
  4. Didier
    Didier avatar
    4 posts
    Member since:
    Mar 2013

    Posted 22 Sep 2013 Link to this post

    FYI, I can also reproduce the problem on Samsung Mini S4 when the form is longer than the screen.

    Best regards.
    Didier
  5. Didier
    Didier avatar
    4 posts
    Member since:
    Sep 2013

    Posted 23 Sep 2013 Link to this post

    Hi all,

    The problem was finally solved by setting data-use-native-scrolling="false".

    Didier
  6. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 23 Sep 2013 Link to this post

    Hi Didier,

    Glad you figured it out and big thanks for sharing that with the community.

    Regards,
    Jordan
    Telerik

    Big news for mobile app and .NET developers! Hear about it at our Release Keynote. Thursday, September 26th, 11AM EDT
    Do you enjoy Icenium? Vote for it in Windows IT Pro Community Choice Awards as Best Cloud Computing Product or Service (Category 5).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top