Position sticky (CSS) & Title placeholder (OutSystems Screen)
Question
Application Type
Reactive

Hello buddies,


I have one question regarding the position sticky (CSS) and the Title placeholder of the OutSystems Screen. 


So, in my situation,  the "position: sticky;" in the MainContent placeholder works perfectly, but in the Title placeholder doesn't work and I don't know why because I use the same style classes for both containers. (see the images below) 


It's my widget tree with two containers with the same style classes - "stickyyy",

It's the class of each container.


Can you help me please?

I searched a lot and I didn't find a solution to this issue.


Thanks in advance,

FC


Solution

Just to clarify.

The position sticky is related to the screen, and must be on the parent, and cannot be placed to the child, in this case, the title and the actions. My suggestion and way that works is to place(image: the styles) on the content-top at the class where has as a child, the title and the action div

So, this was the way. I hope you understand, if not just say so :)

Kind regards,

Márcio

Hello, try to put a z-index bigger than the one on the header class. For example, z-index:1000; As sticky, is an attribute almost like absolute or relative, it will need to have a z-index when there is an element with a z-index higher.

Best regards,

Márcio

Hi Marcio,


Thank you for your fast answer.


I had already tried with "z-index" and it doesn't work, and I don't know why.

I did what you said in your example "z-index:1000;" and still doesn't work.

Do you have more options please?


Thank you so much.

FC

Sorry :( Is this what you want?

https://marcio-carvalho4.outsystemscloud.com/positionSticky/Departments?_ts=637618947692812184

Let me know, and I can do other changes and send a demo if possible

Regards,

Márcio

Yes, it's, but I only want to put position sticky in the Title placeholder and your solution has the sticky position for the Title and Actions placeholder.

Do you know how to put position sticky only for the Title placeholder?


Thank you so much!

FC

The way I was doing just works with the div parent, the content top. I couldn´t give a position sticky to one of the child, unfortunately, and that is where I blocked :(

I will try to continue to see if is possible

I have one other type of solution, but for this one I changed the layout. When you see that something doesn't work you need to look at the HTML elements and make it work smartly.

https://marcio-carvalho4.outsystemscloud.com/positionSticky/Departments?_ts=637619008549877335

Check this, probably is not what you want, but I leave here this just so you know

Regards,

Márcio C.

Hi Marcio,


I appreciate a lot your effort and help!

The only thing I need to know it's how I can use the position sticky in the Title placeholder of a screen.


Let me know if you find any solution for this.


Kind regards,

FC

Ok, I will. I have tried. Sorry :( 

Wish you the best!

Kind regards,

Márcio

Yes, I know and I appreciate it a lot, really!

Wish you the best too.

Thank you!!!

Hello Fabio, 

I have check the Every approach but the I think this is the issue with the outsystems layouts

but to Match requirement I did customization can you go through this URL as well as OML.

May be this will helps you 

Thanks and Regards,

Akshay Deshpande

StickyCSS.oml

Hi Akshay,


I appreciate a lot your help and suggestion, but this doesn't solve my problem.

I need to use the sticky position on the Title placeholder of a OutSystems screen.


Anyway, thank you for your time.


Best regards,

FC

Hi Fabio,

Did you figure out how to make the title position sticky ? If yes can you share your suggestions.

 Thanks 

Hi Priya,


No, I didn't. 

I only can apply the position sticky to the header - Title and Actions placeholders.


I believe we need to use JS to apply the position sticky only to the Title placeholder.


Thank you,

FC 

Thanks, I have set the position to fixed for the title place holder it helped me in my case.


Thanks 

Priya

Solution

Just to clarify.

The position sticky is related to the screen, and must be on the parent, and cannot be placed to the child, in this case, the title and the actions. My suggestion and way that works is to place(image: the styles) on the content-top at the class where has as a child, the title and the action div

So, this was the way. I hope you understand, if not just say so :)

Kind regards,

Márcio

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