Scrollable Panel in Design Studio (to show bigger content)

[Karol-K]

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:

or you can make this via script:

PANEL_1.setCSSClass("scroll-x");

now, the panel will get scrollbar on X axis:

Here is the example application:

• Source Code: DesignStudioBiAppRepository/SCN_SCORABLE_CONTAINER at master · KarolKalisz/DesignStudioBiAppReposito...
• ZIP: Release Example for Scrolable Container · KarolKalisz/DesignStudioBiAppRepository · GitHub

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