Skip to Content
Author's profile photo Karol Kalisz

Scrollable Panel in Design Studio (to show bigger content)

Purpose

I have seen many questions on “scrollable content in design studio”, also this requirement, Design Studio – automate table width dependingly to the number of dimensions.

Basics

A Panel in Design Studio is visualized by DIV element, it shows by default the content as overlay, no scrolls are available. This can be changed by CSS:

the class responsible for this setting is “div.zenborder”. you can define new classes, overwritting this one.


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

Then, as next poing, you jsut need to assign the new class to the css class propery on the corresponding panel:

Capture.PNG

or you can make this via script:


PANEL_1.setCSSClass("scroll-x");

now, the panel will get scrollbar on X axis:

/wp-content/uploads/2014/09/20140915_190522_capture_541213.gif

Here is the example application:

I hope this help some of you in your Ux requirements.

Assigned Tags

      19 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shantakumar Bilgunde
      Shantakumar Bilgunde

      thanks Karol Kalisz,

      its realy helps me.

      Author's profile photo Former Member
      Former Member

      I also tested the Scenario on ipad in BO mobile app or by Safari. But the scrollbar does not appear.

      We tested "-webkit-Overflow-scrolling: touch", but found no solution.

      Any ideas?

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Dirk, I was focused on Desktop - I am not sure if the same trick can be made by CSS for mobile devices, I will try to tryout.

      Author's profile photo Christoph Brill
      Christoph Brill

      Hi Karol,

      have you tried the scrollable panel on mobile devices?

      actually i've got the problem that scrolling doesn't work on mobile devices (ios, windows).

      my post: http://scn.sap.com/message/16563435

      thanks in advance

      regards,

      Christoph

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi,

      this is correct, this idea is using CSS and ipad is blocking the CSS as scrolling as in desktop is not intended on ipad.

      Karol

      Author's profile photo Former Member
      Former Member

      Hey Dirk, we had a problem similar to yours on iOS since scrollbars are not shown in iOS. An alternative would be to use the iScroll plugin here iScroll 5, smooth scrolling for the web . This will enable touch scrolling on iPads.

      Regards,

      Stephen

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Stephen,

      My understanding is that iScroll is effectively a class that needs to be applied to a HTML wrapper container with a unique ID for the scroll area.  So I'm wondering how have you implemented this without referencing the Design Studio generated component div IDs?  Even if you try to implement iScroll as an SDK component, one limitation of the SDK at the moment is that it doesn't allow the development of container components.

      It would be helpful if you shared specifics of how you've implemented iScroll in this context, for clarification.

      Thanks,

      Mustafa.

      Author's profile photo Former Member
      Former Member

      Hi Mustafa,

      I've tried this while working on a responsive table component. I have simply used it by placing my table inside a div which is placed inside the component div. So yes I have done it without referencing the component div. I don't think that using the component div id(this.$().attr('id')) would be a problem as iscroll is called after page load. I am aware that SDK components cannot be used as containers at the moment ๐Ÿ™ . Just hoped that it might help someone out there having problems on iOS with scroll....

      Regards,

      Stephen

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Stephen,

      Thanks for the clarification.  In that context it certainly makes sense then.  So as I understand it, since the content of the scrollable area is predefined in your custom component (ie. responsive table inside div wrapper), you can directly reference this div with iScroll, without the limiitations on trying to develop a generic SDK scroll container.

      Regards,

      Mustafa.

      Author's profile photo Former Member
      Former Member

      Hi Mustafa,

           Yes you got it right, though I would love to have a SDK scroll container but I guess we will have to wait for that. Hope there is someone hearing this ๐Ÿ˜‰

      Regards,

      Stephen

      Author's profile photo Former Member
      Former Member

      Hi Stephen, I am new to this and having difficulty understanding how you implemented this iScroll technique.  If you don't mind could you please share a working example? 

      Thank You,

      Vish

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hello Vishrut,

      if you refer to the blog here, only think you need to do is to create a CSS file and place the styles as in the blog. On which part you have troubles?

      Karol

      Author's profile photo Former Member
      Former Member

      Hi Karol, i tried this for mobile and on android phone it works but only for scrolling down and its not working to scroll up.

      1. div.zenborder div.scroll-y { 
      2.   /* do not allow X scroll */ 
      3.   overflow-x: hidden !important
      4.   /* allow Y scroll */ 
      5.   overflow-y: scroll !important

      can you please help.


      beniam ,

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      Thanks for sharing!

      Do you have idea about how to reset the scroll bar to top?

      Thanks and best regards,

      Alfred

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      you mean, after some user action (e.g. filtering of data) to move the vertical scroll back to the top?

      today I have no clue as this would require some java script to execute (as the scrollbar is purely in CSS and HTML and does not know anything about the content and vice versa - design studio does not know anything about the scrollbar)

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      thx for your script! It´s working fine in panels.

      I wanted to add scrollbars to a popup as well as we show tables there. This seems to work for the y-axis but not for the x-axis.

      Is there a possibility to add the sript-functionality in popups as well?

      thx for your help in advance,

      Thomas

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi,

      for panel in a popup seems that this CSS works:

      div.zenborder.scroll-xy { 

        /* allow X scroll */ 

        overflow-x: scroll !important; 

        /* allow Y scroll */ 

        overflow-y: scroll !important; 

      }

      check an example under applications/SCN_POPOUP-20160428151124.zip at master · org-scn-design-studio-community/applications · GitHub

      Karol

      Author's profile photo Kalyan Verma
      Kalyan Verma

      Awesome. Works like a charm.

      Author's profile photo Uladzislau Pralat
      Uladzislau Pralat

      Hi Karol,

      I would change scroll with auto to have scroll bar appear only if it is necessary. In my opinion, content looks better without scroll ย bar.

      div.zenborder div.scroll-xy {
      /* allow X scroll */
      overflow-x: auto !important;
      /* allow Y scroll */
      overflow-y: auto !important;
      }

      Regards, Uladzislau