Sticky label/container in reactive app

Hello,


I am developing progressive web app on mobile, which is reactive app. Currently I am struggling to make sticky label, which stays on top of page  even when list widgets are scrolled. I tried adding position: sticky or position: fixed to CSS, but id didn't work. 

   position: -webkit-sticky;
    position: sticky;
    top: -1px;


On this screen I want label "Today" to be sticky and everything else to scroll: 




These two CSS classes are currently applied to label today container: 

.label-day{
    font-family: 'OpenSans-SemiBold';
    font-size: 12px;
    color: #696A77;
    margin-top: 15px;
    margin-left: 20px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.label-today-container{
    width: fill;
    padding-top: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
}


Thank you!


Best regards,

Sandra Boguša

Hi Sandra.

Did you check in browser (inspection) if there is no other CSS rule overwriting your rule?
Probably this is what is happening, as you are just applying a class, and most likely the label inside the list will have a more specific rule being applied by default (OutSystems UI framework).

In this case, you will need to write a more specific rule, so that it is the assumed rule in the application.

Hope this helps.

Cheers.

Sandra Bogusa wrote:

Hello,


I am developing progressive web app on mobile, which is reactive app. Currently I am struggling to make sticky label, which stays on top of page  even when list widgets are scrolled. I tried adding position: sticky or position: fixed to CSS, but id didn't work. 

   position: -webkit-sticky;
    position: sticky;
    top: -1px;


On this screen I want label "Today" to be sticky and everything else to scroll: 




These two CSS classes are currently applied to label today container: 

.label-day{
    font-family: 'OpenSans-SemiBold';
    font-size: 12px;
    color: #696A77;
    margin-top: 15px;
    margin-left: 20px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.label-today-container{
    width: fill;
    padding-top: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
}


Thank you!


Best regards,

Sandra Boguša

Hi Sandra,

Try once add !important property in your css. like-

    position: -webkit-sticky !important;
    position: sticky !important;
    top: -1px !important;

@Eduardo Jauch Is right, may be other css will be impact.


Regards

Rahul Sahu

Eduardo Jauch wrote:

Hi Sandra.

Did you check in browser (inspection) if there is no other CSS rule overwriting your rule?
Probably this is what is happening, as you are just applying a class, and most likely the label inside the list will have a more specific rule being applied by default (OutSystems UI framework).

In this case, you will need to write a more specific rule, so that it is the assumed rule in the application.

Hope this helps.

Cheers.


Hi Eduardo,


I did check and checked again just in case - there is nothing overwriting sticky rule. lable-today-container is at the top:



Do you have any other suggestions/ideas what might be wrong? 


Thank you!

Best regards,

Sandra B.

Rahul Sahu wrote:

Hi Sandra,

Try once add !important property in your css. like-

    position: -webkit-sticky !important;
    position: sticky !important;
    top: -1px !important;

@Eduardo Jauch Is right, may be other css will be impact.


Regards

Rahul Sahu

Hi Rahul,


I tried applying CSS with !important property like you suggested, but problem still remains. 


Didn't find any class that is overwriting my CSS.


Do you have any other suggestions on what could be wrong? 


Thank you!

Best regards,

Sandra B.

Hi Sandra. 

Can you share a simple module that reproduces the problem, so that we can take a look? Does not have to be your working module, if you are able to reproduce it.

Cheers.