[OPEN] [#1344] [4.1.0] 4.1 Validation status bar and vertical scroll

  1. #1

    [OPEN] [#1344] [4.1.0] 4.1 Validation status bar and vertical scroll

    Hi,

    I'm trying to set validation status bar in a form but it shows vertical scroll bar when formpanel is not valid. I don't know what is going on.


    Click image for larger version. 

Name:	2016-06-15 13_12_45-localhost_50138_intranet_webform2.aspx.jpg 
Views:	51 
Size:	48.3 KB 
ID:	24644

    My sample:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ID="RM" ShowWarningOnAjaxFailure="false" />
            <asp:ScriptManager runat="server" ID="SM" />
            <div>
                <ext:Viewport runat="server" ID="Objeto_ViewPort" Layout="FitLayout" AutoScroll="false">
                    <Items>
                        <ext:FormPanel runat="server" ID="Objeto_FormPanel" Border="false" AutoScroll="true"
                            DefaultButton="btnSave">
                            <Items>
                                <ext:TextField ID="txtExample" runat="server" AllowBlank="false"></ext:TextField>
                            </Items>
                            <BottomBar>
                                <ext:StatusBar ID="Objeto_StatusBar" runat="server">
                                    <Items>
                                        <ext:Button runat="server" ID="btnSave" Icon="Disk" Text="Save">
                                            <Listeners>
                                                <Click Handler="#{Objeto_FormPanel}.getForm().isValid();"></Click>
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                    <Plugins>
                                        <ext:ValidationStatus ID="Objeto_ValidationStatus" runat="server" FormPanelID="Objeto_FormPanel" />
                                    </Plugins>
                                </ext:StatusBar>
                            </BottomBar>
                        </ext:FormPanel>
                    </Items>
                </ext:Viewport>
            </div>
        </form>
    </body>
    </html>
    Regards.
  2. #2
    Hello Alfredo! Thanks for reporting the issue!

    This is really a bad bad behavior, the error message hide mode does break the layout forcing that scrollbar to show up.

    Add this to your page so that the hidden error message container does not force a layout push on the page:

    <script type="text/javascript">
        Ext.define('Ext.ux.statusbar.ValidationStatus', {
            override: 'Ext.ux.statusbar.ValidationStatus',
            getMsgEl: function () {
                var me = this,
                    msgEl = me.msgEl,
                    t;
    
                if (!msgEl) {
                    msgEl = me.msgEl = Ext.DomHelper.append(Ext.getBody(), {
                        cls: me.errorListCls
                    }, true);
    
                    msgEl.setStyle('display', 'none');
                    msgEl.on('click', function (e) {
                        t = e.getTarget('li', 10, true);
                        if (t) {
                            Ext.getCmp(t.id.split('x-err-')[1]).focus();
                            me.hideErrors();
                        }
                    }, null, { stopEvent: true }); // prevent anchor click navigation
                }
                return msgEl;
            },
            showErrors: function () {
                var me = this,
                    msgEl = me.getMsgEl();
    
                msgEl.setStyle('display', 'block');
                me.updateErrorList();
                msgEl.alignTo(me.statusBar.getEl(), me.listAlign).slideIn('b', { duration: 300, easing: 'easeOut' });
                me.statusBar.setText(me.hideText);
                me.formPanel.body.on('click', me.hideErrors, me, { single: true }); // hide if the user clicks directly into the form
            },
        });
    </script>
    I hope this helps!

    Besides, we've just logged issue #1344 in our bug tracker to tackle this problem!

    Your report and objective test case is really appreciated!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @Alfredo!

    I have just noticed this issue is no longer actual and was probably fixed by the huge #1488 issue!

    Your feedback about it would be most appreciated. Running the bare test case no longer displays scrollbars around the page.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Aug 28, 2015, 1:46 PM
  2. Replies: 1
    Last Post: Aug 26, 2015, 6:55 AM
  3. Replies: 8
    Last Post: Jun 06, 2013, 12:42 PM
  4. Problem with Vertical Scroll in GridPanel
    By vnmacedo in forum 2.x Help
    Replies: 3
    Last Post: Nov 19, 2012, 3:04 PM
  5. Client Side Validation and Validation Status
    By speddi in forum 1.x Help
    Replies: 8
    Last Post: Nov 03, 2011, 11:24 AM

Posting Permissions