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: 

SAPUI5 unnecessary scrollbar generated by SAP

Former Member

on ‎07-09-2015 7:08 AM

0 Kudos

Hi, the above image is the lower right corner of my ui5 application and I have inspected too many elements with chrome debugger and i still can't understand where and why that scrollbar (marked as yellow on the right side of the image) is generated. I can see a gray area (marked as yellow on the bottom of the image) behind my app.

Is this a known issue or do i have some css inconsistencies somewhere? I can't see it being the later one because if i inspect the top most element of my html which is <html class = "sap-desktop sapUiTheme-sap_bluecrystal sapUiMedia-Std-Tablet" etc...> then the gray area seems to be even higher in the hierarchy or outside the pages HTML.

Hopefully someone can shed some light in this.

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (3)

Answers (3)

former_member661723
Discoverer
‎01-24-2020 7:03 AM
0 Kudos

I used the approach described in the documentation. It works for me.

SAPUI5 version 1.38.41

https://sapui5.hana.ondemand.com/1.38.41/#docs/guide/3b9d9f84930d43df90ad0789d99bd4a3.html

In order to make the fullscreen height of the view work properly, we add the displayBlock attribute with the value true to the view.


Show replies
Show replies
saivellanki
Active Contributor
‎07-09-2015 11:16 AM
0 Kudos

Hi German,

Add this style in your CSS.




body{


  margin-top: 0px !important;


  margin-right: 0px !important;


  margin-left: 0px !important;


  margin-bottom: 0px !important;


}

Regards,

Sai Vellanki.

Show replies
Show replies
Former Member
‎07-09-2015 11:20 AM
0 Kudos

Hi there,

Unfortunately this didn't help.

saivellanki
Active Contributor
‎07-09-2015 11:30 AM
0 Kudos

It had worked for me though.


Even I had spaces at top, bottom, right and left side of the app, there use to be a scroll bar present at right side of the app. Then I changed the style properties as provided above. It worked for me!


Regards,

Sai Vellanki.

Qualiture
Active Contributor
‎07-09-2015 9:29 AM
0 Kudos

What is the structure of your layout? Did you use the standard App > Page > View hierarchy, or did you use a different approach?

Also, did you set a (CSS) height somewhere?

Show replies
Show replies
Former Member
‎07-09-2015 10:01 AM
0 Kudos

1) Yes to App > Page > View hierarchy

2) and i definitely set height SOMEWHERE . Can you be a bit more specific?

Qualiture
Active Contributor
‎07-09-2015 10:09 AM
0 Kudos

Well, "normally" -- i.e. in responsive applications -- there is no need to set a height. Would your design break if you remove the manually added heights (either in your code or in CSS)?

EDIT: The maximum height -- that is, one without scrollbars -- is generally catered for by the UI5 framework (the App-Page combo)

Former Member
‎07-09-2015 11:05 AM
0 Kudos

I checked my style.css again and i've set only afew heights manually and they are really unimportant, like for a popup and a table. No custom height was set to major elements like App, Page or View.

Qualiture
Active Contributor
‎07-09-2015 11:12 AM
0 Kudos

Strange indeed... The only thing I can advise you maybe subtract as much as possible from your application (i.e. just the app, page and views and gradually add the content to the point where you get the scrollbar

Former Member
‎07-09-2015 11:20 AM
0 Kudos

Nice thinking. Thanks will try that.

Former Member
‎07-09-2015 11:46 AM
0 Kudos

My app now has only 1 page and all i did with the page is this:

oPage.setBackgroundDesign(sap.m.PageBackgroundDesign.Solid);

also, in firefux debugger i set body height to 99.6% and the scroll bar disappeared, although some gray stuff still exists at the bottom.

Former Member
‎08-25-2015 9:11 AM
0 Kudos

I had the same problem. I'm using the Component -> App -> View model. The solution was to set the height for the App to 99.75%. It's probably some bug, since my code is the same as in official OpenUI5 Explored

Ask a Question