ui5 1.120.11 Unnecessary and unwanted scrollbar on sap.m.TabContainer

rpbouman commented 3 months ago

OpenUI5 version: 1.120.11

Browser/version (+device/version): Google Chrome 123.0.6312.58 official, window enterprise 10

Any other tested browsers/devices(OK/FAIL): Ege 122.0.2365.92 has same issue

URL (minimal example if possible): NA

User/password (if required and possible - do not post any confidential information here): NA

Steps to reproduce the problem:

Struture: View > sap.m.Page > sap.ui.layout.Splitter > sap.m.TabContainer

What is the expected result? In ui5 1.108, there is no horizonatal scrollbar.

What happens instead? In 1.120.11 there is, even though the content does not need one

Any other information? (attach screenshot if possible) two screenshots showing same element in v 1.108 and 1.120.

Cause is the line:

overflow-x: scroll

for select .sapMTabContainer .sapMTabContainerContent .sapMTabContainerInnerContent in https://sapui5.hana.ondemand.com/1.120.11/resources/sap/m/themes/sap_belize/library.css

aborjinik commented 3 months ago

Hi @rpbouman, sorry but according to #5a of CONTRIBUTING.md#requirements-for-a-bug-report I need a running example. Could you please share with us a jsbin sample?

rpbouman commented 3 months ago

Hi @aborjinik , thanks for taking the time.

I just created this minimal JSBin that reproduces the issue. The preview link is here:

https://output.jsbin.com/bapejij

and the code is below:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        <title>ui5 issue 4016</title>
        <script src="https://openui5.hana.ondemand.com/1.120.11/resources/sap-ui-core.js" 
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m,sap.ui.layout" 
                data-sap-ui-xx-bindingSyntax="complex"
                data-sap-ui-theme="sap_belize"></script>
        <script type="text/javascript">

            var app = new sap.m.App();
            var page1 = new sap.m.Page({
                title: "issue 4016",
            });
            var tabContainer = new sap.m.TabContainer();
            var tabContainerItem = new sap.m.TabContainerItem({name: 'Item'});
            tabContainer.addItem(tabContainerItem);
            var splitter = new sap.ui.layout.Splitter({
              orientation: 'Horizontal'
            });

            splitter.addContentArea(tabContainer);
            splitter.addContentArea(new sap.m.Text({text: 'right'}));
            page1.addContent(splitter);
            app.addPage(page1).placeAt("content");

        </script>

    </head>
    <body id="content" class="sapUiBody">
    </body>
</html>

Let me know if you need more!

rpbouman commented 3 months ago

@aborjinik is this ok? Can you reproduce it with this?

viktorsperling commented 3 months ago

Hello @rpbouman,

Thank you for sharing this finding. The issue is still reproducible in 1.120, it should be noted in the latest version 1.123 this does not occur. I've created an internal incident DINC0113761. The status of the issue will be updated here in GitHub.

Regards, Viktor

stephania87 commented 3 weeks ago

The horizontal scroll appears in all themes after SAPUI5 1.120 due to https://github.com/SAP/openui5/commit/b09dcb11a549318f779ef4367c493891e4cc2e7f The case will be now moved to development for a check.

PS: when you test, consider that sap_belize is deprecated in SAPUI5 1.120 https://sapui5.hana.ondemand.com/#/topic/38ff8c27b022475a92b591bcf6262551

rpbouman commented 3 weeks ago

The horizontal scroll appears in all themes after SAPUI5 1.120 due to [b09dcb1]

But why? If there is nothing to scroll it's just noise.

PS: when you test, consider that sapbelize is deprecated in SAPUI5 1.120 << internal link removed >>_

I'm sorry but this link is not working.

I did find this:

https://sapui5.hana.ondemand.com/sdk/#/topic/a87ca843bcee469f82a9072927a7dcdb, is that a reliable source?

SAP / openui5

ui5 1.120.11 Unnecessary and unwanted scrollbar on sap.m.TabContainer #4016