Skip to Content
3
Nov 13, 2019 at 06:17 AM

How to set application width to 100% in version 1.65

1418 Views Last edit Nov 13, 2019 at 06:46 AM 2 rev

Hello Experts,

I'm using version 1.65 of SAPUI5.

In older versions when I wanted to set width of the app to 100% I set the appWidthLimited property of the Shell component to false.

                sap.ui.getCore().attachInit(function() {
                    new sap.m.Shell({
                        appWidthLimited : false,
                        app: new sap.ui.core.ComponentContainer({
                            height : "100%",
                            name : "creditreport"
                        })
                    }).placeAt("content");
                });

In the newer version Shell is no longer part of the index.html, there is only html which looks like this:

<body class="sapUiBody orlPersonalExpenses">
        <div 
            data-sap-ui-component 
            data-name="com.company.personal.expenses.PersonalExpenses" 
            data-id="container" 
            data-settings='{"id" : "PersonalExpenses"}'>
        </div>
    </body>

I searched in the DOM and found the 'sapMShellCentralBox', then I used CSS in order to change it

<style>
            .orlPersonalExpenses .sapMShellCentralBox {
                width: 100% !important;
                margin-right: 0px !important;
                right: 0 !important;
            }
        </style>

Is there an API to set width to 100%? as we all know CSS hacks will eventually come back to bite you in the a*s (-:

Regards,

Omri