Form - touch surfaces are not aligned with widget

[Didier]

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>

[Steve]

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.

[Didier]

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

[n/a]

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

Best regards.
Didier

[Didier]

Hi all,

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

Didier

[Jordan]

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.