I'm building a popup menu that should present a list of items. Above there is a search box that can narrow the list. I tried to limit the size of the container that presents the list and allow the user to scroll (like when I use a list in a regular screen), but whatever I did, the container became longer than the screen (probably as long as the list) and therefore there wasn't any scrolling at all. Any ideas?
Hi Ron
For horizontal scroll:
For vertical scroll:
Thanks
Himani
Hi Himani,
First of all, thank you for your response. Your solution sounds similar to this offered by Vipasha above. As you can read in my response to her, it didn't wrong. I attached a screenshot to the response so she can tell me what wrong I did. Maybe you will be able to tell me too. Tnx
Hi Ron,
You can use the max-height css property to control the height of your container.
Below link will help you to understand how to apply max-height as css or use can use scrollable area:
https://success.outsystems.com/documentation/11/developing_an_application/design_ui/patterns/using_mobile_and_reactive_patterns/interaction/scrollable_area/
Always try to create a reusable class and place it in your theme.
https://www.outsystems.com/forums/discussion/67462/container-with-max-height-660px-overflow-auto/
https://css-tricks.com/almanac/properties/m/max-height/
https://www.w3schools.com/cssref/pr_dim_max-height.php
Hope this helps.
Regards,
Manish Jawla
Hi Maniah,
First of all, thank you for your response. The solution you offered is actually the first thing I tried but it didn't work. I tried it now once again and same result. I'm attaching the settings that I gave to the scrollable area. Maybe you will be figure out what wrong I did. Tnx
You try to enclose your list inside a container, give height to the same container (ex.:- 100%, 50%...so on as per your requirement) and add below CSS to it.
"overflow-y: scroll; "
Hope this will help you.
Happy codding :)
-V.S.
Hi Vipasha,
I'm sure that you are right and that the solution didn't work because I did something wrong. I'm attaching the screenshots so you can see what I done as well as the result. Looking forwrad.
Well, I managed understanding the issue. Since a Block isn't build within a screen, it assums infinit length. Therefore, when I used 50% on the Container hight, it still was infinit. The hight in case of a Block therefore should be in pixels terms.