Skip to Content

Lumira Designer: Adaptive Layout not scrollable?

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

10 Answers

  • Best Answer
    Nov 07, 2017 at 08:14 AM

    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?

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 02, 2017 at 10:46 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 03, 2017 at 10:49 AM

    On desktop if you resize the browser it will show up

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 06, 2017 at 05:35 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 08, 2017 at 12:44 AM

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

    Add comment
    10|10000 characters needed characters exceeded

  • May 09 at 11:46 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 02, 2017 at 01:33 PM

    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?

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 02, 2017 at 02:33 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 06, 2017 at 10:37 AM

    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.

    Add comment
    10|10000 characters needed 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.

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

    Hi Mario,

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

    Add comment
    10|10000 characters needed characters exceeded