Hi,
Is there a way please to make the header fix, when I scroll down please ?
thanks
How about applying the following styles to the elements you want fixed?
.sample { position: -webkit-sticky; position: sticky; top: 0;}
I hope you will find it useful.
where should I apply this css class please ?
Hi @you asen
Use sticky-header class in your container which you want to stick.
.sticky-header
{
position: sticky;
top:50px;
}
top value is changeable on that bases it will be stick after 50px it will stick likewise,you will also able to give that in % as well,
right now i give 50 px because we have header in application so it will stick inside that so for visibility i am giving that its depend on you where you want to stick
I hope it'll help you.
ThanksDeep
I think there's a miss understanding,
I want to make the header fix, this one :
but I cant select this header to give it this css :
the header consist of many elements but I cant select the header itself, if you have an example(.oml) share it please (mobile application)
Please check the below link for your reference.
https://success.outsystems.com/documentation/how_to_guides/front_end/how_to_make_the_header_scroll_with_the_page_in_the_london_theme/
and also you can use this forge component Headerfixed
Hope the above link help for you.
Thanks
Prince
Hi, I had the same issue with my mobile app and I found a solution that worked for me. I used the Fixed Table Header component from the Forge. It allows you to keep the table header fixed while scrolling down the page. It’s very easy to use, you just need to drag and drop the web block and set some properties. You can also customize the style and behavior of the header. I hope this helps you. Let me know if you have any questions.
By the way, if you need any help with your OutSystems projects, you should contact CodeIT. They are a professional and experienced web development company. They can help you with any customizations, integrations, or optimizations you need. They are also very friendly and responsive. You won’t regret working with them!
Hi @you asen,Sharing the oml in which there is a list on screen. Menu is fixed when you scroll the list.You can check the demo to see how it will work through below link.https://personal-qmzjggmd.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/MobileTestCom/Screen4?_ts=638194200975842447
I have not used any CSS. Just using the builtin layout.RegardsKrishnanand Pathak
can you tell me please what did you do exactly to make it fixed?
it is working only with IOS devices, but for me I want to use it as PWA.
I tried with PWA it is working fine.