Skip to 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.

To report this post you need to login first.

19 Comments

You must be Logged on to comment or reply to a post.

  1. Dirk Umbach

    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?

    (0) 
    1. Karol Kalisz 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.

      (0) 
        1. Karol Kalisz 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

          (0) 
      1. 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.

        (0) 
        1. Stephen Santhmayor

          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

          (0) 
          1. 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.

            (0) 
            1. Stephen Santhmayor

              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

              (0) 
          2. Anitha Reddy

            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

            (0) 
            1. Karol Kalisz 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

              (0) 
              1. beniam getachew

                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 ,

                (0) 
    1. Karol Kalisz 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)

      (0) 
  2. Thomas Kejik

    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

    (0) 
  3. 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

    (0) 

Leave a Reply