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/DesignStudioBiAppRepository · GitHub
- ZIP: Release Example for Scrolable Container · KarolKalisz/DesignStudioBiAppRepository · GitHub
I hope this help some of you in your Ux requirements.