[CLOSED] iPad scrolls page up on TextField focus change

  1. #1

    [CLOSED] iPad scrolls page up on TextField focus change

    This issue can be reproduced on the page https://examples3.ext.net/#/Form/Fie...ator/Overview/

    It's only happens on iPad.
    Then I enter a text in the Field1 and select Field2 after (Tab or thouch) the page scrolls up and the selected field hides behind onscreen keyboard.
    Visually it looks like the page jumps down and up each time with I change focus on the form
    Last edited by Daniil; Jun 30, 2015 at 2:11 PM. Reason: [CLOSED]
  2. #2
    Hi @eDataPlatform,

    Welcome to the Ext.NET forums!

    I cannot reproduce it with my iPad.

    Though, I didn't update for awhile and it is iOS 8.1.1 on my device. I see the latest is 8.3.

    What is iOS version on your device?
  3. #3
    I'm using iPad Air 2. But this bug was found by our QA and he uses older iPad Air device.

    I uploaded video with this issue on my OneDrive: http://1drv.ms/1IFmKel

    As you can see on the video the page moves down and up when I click between TextFields.

    This doesn't happens with password boxes on the same page
  4. #4
    Ah, I initially tested on Chrome and it is not reproducible there, but now I tested on Safari and got it reproducible.

    To me it looks to be an issue with Safari. Unfortunately, I cannot find a solid workaround. I only found out that the problem is related with the space above the top field. If there is padding and/or the FormPanel's header, then the issue is reproducible. If remove Title and padding above, then seems the issue is not reproducible.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Change1Click(object sender, DirectEventArgs e)
        {
            this.Field1.IndicatorIcon = Icon.Accept;
            this.ResourceManager1.RegisterIcon(Icon.Accept);
        }
    
        protected void Change1_1Click(object sender, DirectEventArgs e)
        {
            this.Field1.IndicatorTip = "New tooltip";
        }
    
        protected void Change2Click(object sender, DirectEventArgs e)
        {
            this.Field2.IndicatorText = "New indicator's text";
        }
    
        protected void Change3Click(object sender, DirectEventArgs e)
        {
            this.Field3.IndicatorCls = "blue-text";
        }
    
        protected void ChangeVisibility(object sender, DirectEventArgs e)
        {
            if (e.ExtraParams["id"] == mnuShowIndicator.ConfigID)
            {
                this.Field3.HideIndicator();
            }
            else
            {
                this.Field3.ShowIndicator();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Field Indicator - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <style>
            .red-text {
                color: red;
                font-size: large;
            }
    
            .blue-text {
                color: blue;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Crisp" />
            
            <ext:FormPanel
                ID="FormPanel1"
                runat="server"
                Width="785">
                <Items>
                    <ext:TextField
                        ID="Field1"
                        runat="server"
                        FieldLabel="Field1"
                        IndicatorIcon="Information"
                        Anchor="-5"
                        IndicatorTip="A Indicator ToolTip" />
                    <ext:TextField
                        ID="Field2"
                        runat="server"
                        FieldLabel="Field2"
                        IndicatorIcon="Add"
                        IndicatorText="Indicator"
                        Anchor="-5"
                        AllowBlank="false"
                        MsgTarget="Side" />
                    <ext:TextField
                        ID="Field3"
                        runat="server"
                        FieldLabel="Field3"
                        IndicatorText="*"
                        IndicatorCls="red-text" />
                    <ext:TextField
                        ID="Field4"
                        runat="server"
                        AllowBlank="false"
                        FieldLabel="Field4"
                        IndicatorIcon="BulletRed"
                        IndicatorTip="It is required field" />
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Change Icon - Field1" OnDirectClick="Change1Click" />
                    <ext:Button runat="server" Text="Change Tooltip - Field1" OnDirectClick="Change1_1Click" />
                    <ext:Button runat="server" Text="Change Text - Field2" OnDirectClick="Change2Click" />
                    <ext:Button runat="server" Text="Change Css Class - Field3" OnDirectClick="Change3Click" />
                    <ext:CycleButton runat="server" ShowText="true" MenuArrow="false">
                        <Menu>
                            <ext:Menu runat="server">
                                <Items>
                                    <ext:CheckMenuItem
                                        ID="mnuHideIndicator"
                                        runat="server"
                                        Icon="Decline"
                                        Text="Hide indicator - Field3"
                                        Checked="true" />
                                    <ext:CheckMenuItem
                                        ID="mnuShowIndicator"
                                        runat="server"
                                        Icon="Add"
                                        Text="Show indicator - Field3" />
                                </Items>
                            </ext:Menu>
                        </Menu>
                        <DirectEvents>
                            <Change OnEvent="ChangeVisibility">
                                <ExtraParams>
                                    <ext:Parameter Name="id" Value="item.id" Mode="Raw" />
                                </ExtraParams>
                            </Change>
                        </DirectEvents>
                    </ext:CycleButton>
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Grid Panel scrolls to top on change of any item
    By ptrourke in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 03, 2013, 4:09 PM
  2. [CLOSED] TextField - Change Style on Focus
    By shaileshsakaria in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 01, 2013, 3:52 PM
  3. [CLOSED] GridPanel scrolls document when getting focus
    By FVNoel in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Mar 14, 2013, 8:44 AM
  4. [CLOSED] Datepicker automatically scrolls to itself on page load
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 16, 2010, 8:33 PM
  5. Replies: 0
    Last Post: Mar 30, 2010, 5:32 PM

Tags for this Thread

Posting Permissions