Lumira Designer: Adaptive Layout not scrollable?

[mario_panzenboeck]

Hello,

I built a demo application with Lumira 2.0 Designer and I´m facing a problem when resizing the screen. The adaptive layout component arranges the elements correctly but when resizing the window to "small" (on desktop) my tiles arrange vertical and the tiles at the bottom aren´t visible to the user anymore. By default there is also no option to scroll down. So I was searching for a solution and did the following:

Created a panel and inserted the adaptive layout component there.

Create CSS class:

div.zenborder div.scroll-y

{ /* do not allow X scroll */ overflow-x: hidden !important; /* allow Y scroll */ overflow-y: scroll !important;

I also assigned the CSS class to the panel.

Please see the attached screenshots for the result...

Any ideas how to fix this?

Thanks in advance!

Content:

CSS:

Panel with assigned CSS Class:

Result large:

Result medium:

Result small: (as you can see I´m not able to scroll down to see the 4th tile completely)

[mario_panzenboeck · Accepted solution]

I fixed this - changed the css to the following:

div.zenborder div.scroll-xy {

/* allow X scroll */
overflow-x: scroll !important;

/* allow Y scroll */

overflow-y: scroll !important; }

Now when I open the report (locally or on BIP within Lumira Designer) and resize the window the scrollbar appears.

I realised when I open the report within the BI Launchpad the scollbar doesn´t appear even when resizing the window.

Any idea how to get this working also on the BI Launchpad?

[mario_panzenboeck · Accepted solution]

I realised it really depends on which browser you are using and if you delete all the local cache files or not. This issue doesn´t appear with chrome or firefox.

[MustafaBensan]

Hi Mario,

I have encountered the same requirement before and successfully applied the exact same CSS shown above for class scroll-y. In your case however, I have noticed that although you have defined scroll-y in the CSS, you have actually assigned class scroll-xy as the Panel CSS Class property value instead of scroll-y. Perhaps this is a typo?

Regards,

Mustafa.

[mario_panzenboeck]

Hello Burcu,

you can solve this by using css (like described above) or use Lumira 2.1. There is a new component called "scrollable container".

Hope this helps!

Best regards,

Mario

[former_member241445]

Hi.

If I right understand right,you want to realize follow picture.I've succeed for it,you can add this css

.sapUiLayoutAbs.sapUiLayoutAbsOvrflwXHidden.sapUiLayoutAbsOvrflwYHidden.zenborder.zen-design-none-border>div>#ADAPTIVE_LAYOUT_1 {
    overflow-y: scroll !important;
}

[Former Member]

Hi

I faced the same problem as I am trying to implement my site madhustamps and here the answers helped me.

Thankyou for the post and sharing.

[Former Member]

On desktop if you resize the browser it will show up

[burcu_kocas]

Hi Mario,

Is there any update on this, can you fix the problem?

[mario_panzenboeck]

Hello, even when I resize the scrollbar is not showing up:

I can see only three tiles...the 4th is at the bottom where I can´t scroll to.

[l_zygadlo]

The problem seems to be with the class you are using. On BI Launchpad I have noticed that sometimes different class is used (.sapUiLayoutAbsOvrflwYHidden) and therefore the scrollbar is still hidden.

The most reliable solution that I have found is to use CSS Styles field, instead of CSS Class and just input

/* do not allow X scroll */
overflow-x: hidden !important;
/* allow Y scroll */
overflow-y: scroll !important;

This seem to work both in Local Mode and on BI Platform.

[mario_panzenboeck]

Hello,

I realised that the script is actually working - but ONLY on mobile devices (in my case iphone). On the desktop I have no option to scroll - there´s also no visible scrollbar.

[mario_panzenboeck]

Hi Mustafa,

thanks for sharing your thoughts. You are right in the screenshot the name is different - I corrected this with the same result -> no scrollbar visible.

Any ideas?