Skip to Content
avatar image
Former Member

SCROLLING/SWIPE does not work in iphone 7 and other mobile devices

I created a SAP Design Studio app (1.6 SP3 ) with scrolling, I tested on Chrome and firefox browsers and it works fine.

Here my CSS with scrolling and media query response code:

/*  SCROLLABLE CONTAINER   */
/* https://github.com/KarolKalisz/DesignStudioBiAppRepository/blob/master/SCN_SCORABLE_CONTAINER/scroll.css  */
div.__container0 div.scroll-x {
    /* allow X scroll */
    overflow-x: scroll !important;

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

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

    /* allow Y scroll */
    overflow-y: scroll !important;
}

div.__container0 div.scroll-xy {
    /* allow X scroll */
    overflow-x: scroll !important;

    /* allow Y scroll */
    overflow-y: scroll !important;
}

div.__container0 div.hidden {
    /* do not allow X scroll */
    overflow-x: hidden !important;

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

    .mytext1
    {
    font: 24px bold center normal Arial, sans-serif !important;
    
    
    }
div.zenborder div.scroll-x {
  /* allow X scroll */
  overflow-x: scroll !important;
  /* do not allow Y scroll */
  overflow-y: hidden !important;
}
div.zenborder div.scroll-y {
  /* do not allow X scroll */
  overflow-x: hidden !important;
  /* allow Y scroll */
  overflow-y: scroll !important;
}
div.zenborder div.scroll-xy {
  /* allow X scroll */
  overflow-x: scroll !important;
  /* allow Y scroll */
  overflow-y: scroll !important;
}
div.zenborder div.hidden {
  /* do not allow X scroll */
  overflow-x: hidden !important;
  /* do not allow Y scroll */
  overflow-y: hidden !important;
}

@media screen and (max-width: 736px) {

    .myHeaderText {
        font-size: 12px !important;
        text-align: center !important;
        line-height: 55px !important;
        color: #ffffff  !important;
        font: Calibri, sans-serif !important;
        
    }
    .mybutton1
    {
        border-radius : 10px !important; 
        color:#004080!important; 
        background-color:#f2f2f2 !important;
        font: 10px Calibri, sans-serif !important;
        /*font-weight: bold;  */
        text-align: center;
        white-space: normal ; 
         word-wrap: break-word;
    }    
    
    .mytext1
    {
    font: 8px bold center normal Arial, sans-serif !important;
    
    
    }
         
}

If i run it on Safari browser from Iphone 6 plus it does not scroll/swipe, i got only a static view. I cannot swipe up and down and i cannot scrolling up and down.

There is a specific code for swiping?

Why?

What's happened?

Best regards

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Nov 07, 2016 at 03:06 PM

    Please read the SAP Help - especially page 426 - http://help.sap.com/businessobject/product_guides/AAD16/en/ds_16SP03_user_en.pdf not all the CSS is supported on iPhone

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 07, 2016 at 05:07 PM

    Hi - I am saying that there are restrictions on CSS support on an iPhone

    There are some SDK's that offer work-arounds for the responsiveness.

    See the new Analytics Extension directory - there is a new site now - see this blog: https://blogs.sap.com/2016/11/07/sap-analytics-extensions-directory-2.1-is-live/

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 07, 2016 at 04:54 PM

    Thanks,

    So are you suggesting me i have try to adapt my code for CSS phone?

    I have looking at this issue on web and at this link:

    https://blogs.sap.com/2015/12/01/design-studio-innovation-series-topic-8-introducing-the-new-m-mode-for-rendering-fiori-style-apps-in-design-studio-16/

    i have found out that:

    With the two rendering modes, SDK components must now specify which rendering mode they support. This can be either or both. In my view though, a more important benefit of the new SAP M mode is that it means the sap.m library is now officially supported for SDK component development. In the past, there have been many discussions on the SCN about the use of sap.m controls in SDK components, with issues related to click events and mobile scrolling requiring workarounds to be implemented. With Design Studio 1.6 it’s great to see that these issues appear to have been resolved and we should now be able to take advantage of sap.m controls more freely when needed. This is especially relevant for the Fiori-style components in the SCN Design Studio SDK Development Community component set.

    So i thought the issue it was solved with this new Design Studio version.


    At p.52, mobile dedicated there are not many hints about that.

    I found here:

    https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

    that the proper statements suggested is the same i used in my code.

    Maybe this CSS code is not supported by design studio?

    Thanks again

    Best regards

    Marco

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi,

      I have the same issue as Marco, we have many users wanting to use Design Studio on iPads and it does not scroll. This device should not be any different to a windows 10 touch pad from their point of view, and these work (generally) fine. Also, I have used all the other SAP tools on Safari, for example to Launchpad.support.sap.com and this is great. Design studio is supposed to be the same as Fiori, so should work the same way.

      SAP Need to take this issue seriously, it is a real issue to hobble something as powerful as Design Studio like this.

      Regards

      Alex

  • Jun 02, 2017 at 04:24 AM

    Hi Marco,

    Scrolling on mobile devices for Design Studio is a popular topic on the SCN. Here are some important considerations you should keep in mind:

    1. It appears that you are consuming your Design Studio app in the native mobile Safari browser, presumably by accessing the BI Launchpad URL, instead of via the native SAP BI Mobile app for iOS. Such usage is not officially supported as per SAP Note 1971933.

    For Design Studio specifically, this is re-enforced on page 35 of the Design Studio Product Availability Matrix, which states that viewing through native mobile browsers is unsupported.

    In summary, the only supported consumption method is via the native SAP BI Mobile app;

    2. With the new SAPUI5 M mode, which is designed for mobile as well as desktop, you should find that standard components such as Listboxes and Crosstab scroll as expected. Panel scrolling is an exception. Based on your CSS example, I assume that you are trying to apply scrolling to a Panel component as described in the blog post Scrollable Panel in Design Studio (to show bigger content). However, if you follow the discussion you'll see that the CSS approach described there is intended for desktop and not mobile;

    3. In my experience, implementing scrolling on mobile via CSS has to be done on a case-by-case basis depending on the device and the component, also taking into account the Design Studio restrictions for mobile scrolling. There is no silver bullet CSS approach that will address all mobile scenarios.

    All of that being said, based on page 33 of the latest Lumira 2.0 Roadmap you should find that there is better scrolling support on mobile devices coming in Lumira Designer 2.0.

    Regards,

    Mustafa.

    Add comment
    10|10000 characters needed characters exceeded