Help with CSS scrolling

Back to Forums

Elaine Guimaraes

Solved

Question

Reactive

Application Type

Reactive

Hi guys,

Please could someone with scrolling in my CSS?

I have a screen with blocks (Block one - Sections: horizontal list / Block two-tasks - vertical list) This is functional, but I am having a problem with scroll. I need that vertical scroll olny show in specific vertical section thats taken overflow. (image attached)

If I have sections columns in overflow, I need horizontal scrool too.

*** Attached I'm sendding the excatly design that I need to make on Outsystems.

Application link to debug css if someone needs

https://personal-h6lmzlzo.outsystemscloud.com/Zlate/TaskBoard?ProjectId=3

Thank you so much!!!

Invisible sectorized scroll.PNG

DesignINeed.PNG

17 Jun 2023

Aman Singh Rajput

Solution

Hello @Elaine Guimaraes ,

You can give CSS styling overflow-y: scroll; to the vertical list and overflow-x: scroll; to horizontal list along with some height. This will give you the desired output as shown in the picture you provided.

Hope this helped you.

Regards,

Aman Singh Rajput

See solution in context

17 Jun 2023

Benjith Sam

MVP

Solution

Hi Elaine,

As per your implementation, you need to make changes in the below mentioned CSS style class definitions:

CSS Snippet:

.list.list-group {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow-x: auto;
}

.section .section__task {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 70vh;
}

To override a pre-defined OutSystemsUI style class definition like .list.list-group - I would suggest you chain a custom style class with a new style definition. i.e., my-custom-style .list.list-group.
Avoid defining inline-style rules.

Kind regards,

Benjith Sam

See solution in context

17 Jun 2023

Aman Singh Rajput

Solution

Hello @Elaine Guimaraes ,

Hope this helped you.

Regards,

Aman Singh Rajput

17 Jun 2023

Elaine Guimaraes

Thanks Amanda!!

17 Jun 2023

Benjith Sam

MVP

Solution

Hi Elaine,

As per your implementation, you need to make changes in the below mentioned CSS style class definitions:

CSS Snippet:

.list.list-group {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow-x: auto;
}

.section .section__task {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 70vh;
}

To override a pre-defined OutSystemsUI style class definition like .list.list-group - I would suggest you chain a custom style class with a new style definition. i.e., my-custom-style .list.list-group.
Avoid defining inline-style rules.

Kind regards,

Benjith Sam

17 Jun 2023

Elaine Guimaraes

Thank you Benjith!!

17 Jun 2023

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines