55
Views
5
Comments
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

mvp_badge
MVP
Rank: #5

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.

Rank: #90

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

mvp_badge
MVP
Rank: #5

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.