cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to set application width to 100% in version 1.65

former_member182374
Active Contributor

on ‎2019 Nov 13 6:17 AM

3,328

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

Show replies
Show replies
prabhatpathania
Explorer
‎2024 Aug 13 8:47 AM
0 Kudos

In your manifest.json, add the below config under sap.ui5

"config": { 
      "fullWidth": true
    },

 

Answer

Accepted Solutions (0)

Answers (3)

Answers (3)

nerevar
Participant
‎2022 Sep 22 2:02 PM

Hello

So in my case there was a Shell element still present in my view and I had to add this attribute :

Show replies
Show replies
boghyon
Product and Topic Expert
Product and Topic Expert
‎2019 Nov 13 1:35 PM
0 Kudos

> In the newer version Shell is no longer part of the index.html

Look for other Shell occurances in your project. Maybe it moved to the root view?

Otherwise, see the following answer in How to disable letterboxing and adjust UI5 for the widescreen?

Show replies
Show replies
former_member312987
Active Participant
‎2019 Nov 13 8:21 AM
0 Kudos

Hi Omri

It is done in the manifest file.

Check the documentation:

Manifest

sap ui Manifest

Saludos

Raquel

Show replies
Show replies
former_member182374
Active Contributor
‎2019 Nov 13 3:26 PM

Thanks.

Tried it: 

"sap.ui": {
     "technology": "UI5",
     "icons": {
       "icon": "",
       "favIcon": "",
       "phone": "",
       "phone@2": "",
       "tablet": "",
       "tablet@2": ""
     },
     "deviceTypes": {
       "desktop": true,
       "tablet": true,
       "phone": true
     },
      "fullWidth": true
   },

didn't work. What am I missing?

Regards,

Omri

nerevar
Participant
‎2022 Sep 22 1:56 PM
0 Kudos

Hi

I tried and I still have same issue with the sapMShellCentralBox element

regards

Ask a Question