Removing or hiding scrollbar in Dynamic Layout by implementing CSS
Specifics: I am using a Dynamic layout (Layout-1) with collapsible header type and inside that, I am embedding a section which has a table layout (Layout-2)
Issue: I am getting two horizontal-scrollbars as you can see in the image (scrollbar.png)
Root cause: By looking into the issue I get that the two scroll bars are coming from two layouts (Layout-1 and Layout-2)
_______________________________
I tried using below inline style:
overflow-x: hidden !important;
and after implementing these results are as per the image (scrollbar1.png)
_______________________________
I have two General questions and I would appreciate any suggestions
Questions:
- Where do we implement CSS in Pega? (which rules, can anyone suggest content on these)
- How could I completely remove the scrollbar? (as showing in scrollbar1.png)
***Edited by Moderator Marissa to change type from Pega Academy to Product, update Product details and platform capability tags****
Pegasystems Inc.
IN
Hi Soundane,
1. Go to application menu > skin > included styles tab > Additional style sheets. Here you can add new style sheet and incorporate your CSS changes.
2. Horizontal scroll bar mostly might be due to fixed width. Check if any of the layouts or containers have a fixed width and change it to auto. Also under table configuration, width of the content should be fill 100 %.
Thanks,
Vasanth