Hello,
I am having a long list and I am unable to get style class for my list. I don't want to use scroll option and I want my screen to look equal on left and fight side of the screen. I have attached the photo which is my output. Here I need to scroll and the content is only on left.
Do you mean you want the text to wrap equally? if yes use the bellow css.
Overflow-wrap: break-word;
and enclose the list into a container and set a fixed width.
Unable to do this. Could u elaborate more on this?
Siddhi Amilkanthwar,
Actually, it is a hard thing to do and not a simple thing with pure CSS. A partial solution is to add the CSS code below to the section which you have the content:
width: 100%; height: 100vh; overflow: hidden;
Also, for screen to look equally from left and right side. You can choose to add margin-left and margin-right or padding-left and padding-right like below
margin-left = 50%; --- to make content at center
Hope this helps.
Hello
You need to Wrap your list in your container and give a class to that container
and you need to apply following css to your container
.scroll__overflow {
overflow-y: scroll;
max-height: 300px;
}
and if you need to align a list in content in center then you can use flex property on a container
display: flex; justify-content: center;
sample
I hope this helps
Best Regards
Tousif Khan
This is very helpful but can we divide content in 2 equal halves so that there no need to scroll?
If you want to divide equally you can use,
adaptive column widget ,
and choose 2 col from there
check here
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Mobile_and_Reactive_Patterns/Adaptive/Columns
Hi @Siddhi Amilkanthwar,
You can also use the Scrollable Area for reactive app:
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Mobile_and_Reactive_Patterns/Interaction/Scrollable_Area
Regards,
Manish Jawla
Hello @Manish Jawla,
This is great but I don't want to scroll. Do we have any option where we can equally divide the content?
Hi Siddhi,
May I know why you would like to achieve this because usually list records have scroll if content doesn't fir to the assigned area and if you want to divide it's content then you need to process it locally and assign it to another 2 lists which might not be performant or best practice.
Thanks,
@Siddhi Amilkanthwar Are you trying align a single list , spliting into half , you can just adjust the width by css. just add a custom class so that it will not impact on other lists.In the screenshot the values are coming from a single list and adjusted as per your requirement.
https://naveen-mahe.outsystemscloud.com/Reactive_app/Home?_ts=638004046936770268
Attached the oml for your reference, check the css in the home page.
.list .list-item { width: 50%; display: inline-flex;}
Are you trying to display the list wrapped? Something like below image