Skip to Content
0

Lumira Designer: Adaptive Layout not scrollable?

Nov 02, 2017 at 08:46 AM

716

avatar image

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)

1.png (16.4 kB)
2.png (9.9 kB)
3.png (6.1 kB)
large.png (750.6 kB)
medium.png (945.9 kB)
small.png (818.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

10 Answers

Best Answer
Mario Panzenboeck Nov 07, 2017 at 08:14 AM
0

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?

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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.

0
Mustafa Bensan Nov 02, 2017 at 10:46 AM
2

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.

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 03, 2017 at 10:49 AM
1

On desktop if you resize the browser it will show up

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 06, 2017 at 05:35 AM
1

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.

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 08, 2017 at 12:44 AM
1

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;
}


1.png (18.0 kB)
Share
10 |10000 characters needed characters left characters exceeded
Mario Panzenboeck May 09 at 11:46 AM
1

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

Share
10 |10000 characters needed characters left characters exceeded
Mario Panzenboeck Nov 02, 2017 at 01:33 PM
0

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?

Share
10 |10000 characters needed characters left characters exceeded
Mario Panzenboeck Nov 02, 2017 at 02:33 PM
0

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.

Share
10 |10000 characters needed characters left characters exceeded
Mario Panzenboeck Nov 06, 2017 at 10:37 AM
0

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.


1.png (339.8 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

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.

0
avatar image
Former Member
May 09 at 11:04 AM
0

Hi Mario,

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

Share
10 |10000 characters needed characters left characters exceeded