Hi Dear Community,
I’m new to OutSystems and have no JavaScript programming skills so please exuse me if the question is too obvious for you.
I use a List to scroll elements on the screen. A ButtonsGroup above is used to filter the list. Bellow the ButtonsGroup there is a search-box to narrow the filtering result. When the user starts scroll down the list, I would like the ButtonsGroup to disappear (scroll up) but the search box to remain on top of the screen (just below the header). When the user scrolls up (swips down) I would like the ButtonsGroup to start scroll in again. Is that possible?
Hi @Ron Ben ,
To solve your issue you can create a css class to your container. Example:
.menu-buttons { position: fixed; z-index: 2;}You just need to put menu-buttons as your style class in the container and you are ready to go!
Happy coding!
Hi Ron it's simple
Try to add all these things in a parent container and on that container style box write the overflow-y: scroll; and your problem will solve.
Currently I think your list has scroll view.
Hope this will help you
Hi Yshpal,
Thanks for your answer. I tried to implement it but something doesn't work for me. Please see the attached screenshot where you can see that this part still scrolloing. Any suggestions?
Hi Ron please place that css in the style box not in style classes. You will see the two tabs currently you are placing in first tab on the style tab scroll down little bit and you will see a style input box where you can place this.
Ok I think you need like you want to fix the search container on the top right when you scroll.
For this you need to put the css on the input of the search like this
position: sticky;
top: 0px;
Sorry for putting in the wrong place. Now I find the right place to put. It affects the UI but not in the right way. The search remain sticky, but the list goes on top of it (see the screenshot). I have to scroll back all the way down in order to uncover the search box. Can you please fix the CSS and send me? Tnx
Send me your oml. Will fix it and give you
Attched is the OAP file and a screenshot so it will be easy for you to find the screen. tnx
Hi Ron as you have used lot of components. so am not able to publish it again. but am atteching my own oml for your reference with the functionality. you need to use the same structure as defined in my oml
try to remove the parent container and give the exact style that i have done in the oml.
hope this will help. if your issue is solved then please mark it as solution.
thanks man.
Hi,
I got around 20 errors when trying to run your OML. I just imported it, accept all requested changes in dependencies (now dependencies seems to be clear) and still... I'm attaching a screenshot. Any idea?
Tnx
Anyway, I manage to copy paste the part you sent me. The result is almost perfect except that the scrollbar appears also next to the part that shouldn't be scrolled, unecessarily reduce the screen wide allocated to the ButtonsGroup. Can this one be solved as well? Attached is a screenshot.
Hi Ron the scrollbar will not show in your actual mobile. Try to open your application in real mobile.
Hope this helps you.
Actually on the mobile all is scroll. I thought that the issue is with my phone so I tried the simulator which show better result. So I guess that I shouldn't excpect it to work all on devices. In same it will work, on some it won't and on some it will semi-work. Correct?
I will attached a screenshot from my mobile
Hi Ron it will work on all devices. Please check my oml correctly.
I cannot compile and run your OML because of the issue I mentioned before (the errors it cause on my environment), but I attached a screenshot of your demo with the code I copied to my app.
If you find that my solution helped you solve your issue, please mark it as the solution.
Many thanks!
Sure I will. Tnx