Make only one section of the screen scrollable horizontally
Hi,
I have a screen with two sections:
- One small, containing my filter criterias. I want this section to fit to the screen width exactly.
- One bigger, a repeating grid with more than 10 columns, bigger than the screen.
I want the second section to fit to the screen width without expanding the rest of the content by being scrollable horizontally. The problem is that for now, the section is extending the whole screen, causing the first section to extend to match the second one's size. How can I fix my section to the screen width without impacting the rest of my screen?
Thanks.
Pegasystems Inc.
IN
Did you try setting the layout width of Section 1 to Pixels Fixed/Fit Content rather than Fill 100% ?
Incessant Technologies
IN
For Second section, create another wrapper section and uncheck Auto-generated HTML checkbox.
In HTML add below code
<DIV style="width:170px; height:auto; overflow-x:auto">
<pega:include name="SecondSectionName" type="Rule-HTML-Section" />
</DIV>
Call above wrapper section in actual section.
Here we are building a separate div for that section, providing fixed height to it and adding scroll bar(overflow-x:auto)
Hope this code will help you.
Regards
Swathi S
Iriz Consulting
FR
Hi, this is interesting (I'm kind of new to Pega and I never thought about this solution when having troubles with sections) but if your solution works with a fixed size, it doesn't in my case as I want my div to adapt to my screen width, which may change according to the device you use. I'd like to get my section scrollable horizontally and adapted to my screen width.
I also tried your solution using "width:100vh" but it didnt work as well...
Incessant Technologies
IN
I think,still we can make it.Please try below code.
<DIV style="height:auto; overflow-x:auto" id="WrapperSection">
<pega:include name="TestSection" type="Rule-HTML-Section" />
</DIV>
<script>
pega.u.d.attachOnload(setWidth, true);
window.onresize = setWidth;
function setWidth() {
document.getElementById("WrapperSection").style.width = document.body.clientWidth;
}
</script>
Thank you
Regards
Swathi S
Iriz Consulting
FR
Hi Swathi,
Sadly it doesn't work, the overflow doesn't seem to work and the whole screen got scrollable (including the headerand the first section) instead of having my second section only scrollable with a size fixed to the screen's one...