ExtJS Fullscreen Container not working

StackOverflow https://stackoverflow.com/questions/20485796

  •  30-08-2022
  •  | 
  •  

Question

In the previous version of Sencha Architect 2, there's no problem. I've just upgrade to Sencha Architect 3, and I can't seem to make a container to fill the browser screen.enter image description here

My web has a Viewport. Inside there's a Container with the background. But normally it would fill the whole browser, but it doesn't in this case. The Container can't fill all of the browser height, it just stops midway. Here are some code of the Viewport:

Ext.define('QuickDecisionExtJS.view.AppViewport', {
    extend: 'Ext.container.Viewport',

    id: 'AppView',
    layout: {
        type: 'card'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    cls: 'loginBackground',
                    id: 'LoginView',
                    items: [
                        {
                            xtype: 'form',
                            cls: 'loginForm',
                            frame: true,
                            id: 'frmLogin',
                            width: 450,
                            defaults: {
                                anchor: '100%'
                            },
                            bodyPadding: '5px',
                            icon: 'resources/Start.png',
                            title: 'Đăng nhập hệ thống'
                        },
                        {
                            xtype: 'image',
                            id: 'imgLogin',
                            src: 'resources/QuickDecision.png'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

My web has two views, a login view and a main view, each has their own background. That's why I added a CSS class for the login container. I use the Sencha Neptune theme. Anyway to solve this? Does it have anything to do with CSS? I will post some CSS just in case:

.loginBackground {
    background-image: url('resources/white-metro.jpg');
    background-size: 100% 100%;
}
.loginForm {
    margin: 15% auto;
}
Was it helpful?

Solution

I think this is occurring because whatever div the .loginBackground class is applied to is not completely stretched. For a true fully stretched background I would remove the loginBackground class in favor of the following definition:

body {
    background-image: url('resources/white-metro.jpg');
    background-size: 100% 100%;
}

You could then completely remove the 'loginBackground' container since it appears to just be extra nesting and the viewport will by default be rendered to the page's <body> element.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top