[CLOSED] Problem with large forms, validation and scroll

  1. #1

    [CLOSED] Problem with large forms, validation and scroll

    Editar

    Hi, i need help for this topic.

    When i have a large form(scroll form) when a field fail his validation putting the messege under the field,if the layout has scroll, he scroll to top

    Why this behaviour?? Any solution to this?


    Mini Example


    @{
        var container1 = Html.X().FieldContainer()
            .Layout(LayoutType.HBox)
            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
            .PaddingSpec("10 10 0 100")
            .Flex(1)
            .Items(
                Html.X().TextFieldFor(m => m.DE_NOMBRE)
                    .PaddingSpec("3 10 3 10")
                    .MsgTarget(MessageTarget.Under)
                    .MaxWidth(170),
                Html.X().TextFieldFor(m => m.DE_PRIMER_APELLIDO)
                    .PaddingSpec("3 10 3 10")
                    .MsgTarget(MessageTarget.Under)
                    .MaxWidth(170),
                Html.X().TextFieldFor(m => m.DE_SEGUNDO_APELLIDO)
                    .PaddingSpec("3 10 3 10")
                    .MsgTarget(MessageTarget.Under)
                    .MaxWidth(170)
            );
    }
    
    @(Html.X().FormPanel()
        .Layout(LayoutType.Center)
        .Region(Region.Center)
        .OverflowY(Overflow.Auto)
        .ID("frm_registro")
        .Items(
            Html.X().AntiForgeryField(),
            Html.X().FieldContainer()
                .ID("pnl_registro")
                .Width(800)
                .Layout(LayoutType.VBox)
                .Items(
                  container1,
                  container2,
                  container3,
                  container4
                )
        )
    )

    Regards.
    Last edited by fabricio.murta; Oct 20, 2017 at 5:58 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @dlanza!

    We are sorry for the time to reply you this thread and afraid we will not be able to fulfill you a good answer for not being able to reproduce the issue.

    Unfortunately your mini test case is so mini we can't just run it on our side. We can suggest you basing your test case from one of our examples in MVC Examples Explorer, so that it is a code sample that we can run as a whole and actually see the issue you described happening at our side. Then we'll be able to provide you a much better feedback on the issue.

    Please review also our More Information Required thread for general information and some WebForms test case templates. Whether you provide it in C#, VB.NET, WebForms or MVC Razor Syntax (as your test case snippet suggests), is not a problem.

    All we need is some code with no unrelated code, with no proprietary code (we don't want you to publicly disclose your company's work), yet with mock data with no missing references. And for that a good starting point is our MVC Examples explorer. You can even download the MVC Examples Explorer sources from github: https://github.com/extnet/Ext.NET.Examples.MVC/

    We hope you understand, and we're looking forward to your test case so we can understand and help you with the issue (or fix Ext.NET if that's a bug, of course).
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @dlanza!

    It's been some time since we replied your inquiry here and still no follow-up from you. Do you still need help with this issue? Unfortunately we really would need the runnable test case before we can further help you on this issue.

    We may mark this thread as closed if you don't reply in 7+ days from now but, even after closed, you will still be able to post your update here if or when you feel fit.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi, i show you a new example.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Example large form scroll</title>
    </head>
    <body>
        @Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).ShowWarningOnAjaxFailure(false)
    
        @{
            Layout = null;
        }
    
        @(
            Html.X().Viewport()
                .ID("viewport_layout")
                .Layout(LayoutType.Fit)
                .Items(
                  Html.X().FormPanel()
                    .AutoScroll(true)
                    .Items(
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                             ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                            ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                            ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                            ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                            ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                )                            
                    )
    
              )
        )
     </body>
     </html>
    When i have a view with scroll and set layout type "hbox" of FieldContainers and the field validation type is "under", when a validate failed, the page scroll to top, you can replicate with this example, try to fail a validate of last fields when you have scroll.

    Why happend this? Any solution to this behaviour.

    Regards.
  5. #5
    Hello @dlanza!

    Thanks for the new test case, but I'm not sure how I'm supposed to trigger the validation in the test case you provided. If I leave the fields blank and tab away, they just accept it as there's no validation code in the sample at all... I can't really find anything validation related in your new test case.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Sorry Fabricio, i missing field validation, updated case with required validation fields.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Example large form scroll</title>
    </head>
    <body>
        @Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).ShowWarningOnAjaxFailure(false)
    
        @{
            Layout = null;
        }
    
        @(
            Html.X().Viewport()
                .ID("viewport_layout")
                .Layout(LayoutType.Fit)
                .Items(
                  Html.X().FormPanel()
                    .AutoScroll(true)
                    .Items(
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false)
                             ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false)
                            ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false)
                            ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false)
                            ),
                        Html.X().FieldContainer()
                            .Layout(LayoutType.HBox)
                            .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                            .Items(
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false),
                                Html.X().TextField()
                                    .Name("username")
                                    .FieldLabel("Username")
                                    .BlankText("Your username is required")
                                    .Flex(1)
                                    .PaddingSpec("3 10 3 10")
                                    .MsgTarget(MessageTarget.Under)
                                    .AllowBlank(false)
                            ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false)
                                ),
                            Html.X().FieldContainer()
                                .Layout(LayoutType.HBox)
                                .FieldDefaults(fd => fd.LabelAlign = LabelAlign.Top)
                                .Items(
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false),
                                    Html.X().TextField()
                                        .Name("username")
                                        .FieldLabel("Username")
                                        .BlankText("Your username is required")
                                        .Flex(1)
                                        .PaddingSpec("3 10 3 10")
                                        .MsgTarget(MessageTarget.Under)
                                        .AllowBlank(false)
                                )                            
                    )
    
              )
        )
     </body>
     </html>
  7. #7
    Hi @dlanza! I run your example. I get the fields being updated with validation yet... I don't get it pulling me to the top of the page.

    I tried walking down by keyboard (tab) scrolling down with mouse wheel, and dragging the scrollbar. When I leave the field keeping it empty, it turns red, show validation failure text below it and... it does not scroll up at all!

    Can you detail on the step-thru to reproduce the issue? Maybe the web browser and version you are using is relevant?

    Just in case, yes, I am ensuring the window is low enough to display the scrollbar and I am scrolling down so that it gets to the last row of fields. No matter how I tried, I can't have it scroll back up to top.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Export large data problem
    By AAI79 in forum 1.x Help
    Replies: 0
    Last Post: Sep 04, 2012, 8:29 AM
  2. [CLOSED] Validation Before Call to Handler with Multiple Forms
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 12, 2012, 3:43 PM
  3. Replies: 2
    Last Post: Jun 27, 2011, 10:37 AM
  4. Helpme, Validation of Forms.
    By julioc_m18 in forum 1.x Help
    Replies: 0
    Last Post: Feb 07, 2011, 11:29 PM
  5. [CLOSED] [1.0] Problem with very large param
    By juane66 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 24, 2010, 12:50 AM

Posting Permissions