PullToRefresh

[André]

Hi, how can I change de background color of the panel that pull to refresh messages appears?

[Tina Stancheva]

Hi André,

The answer to that question would depend on the Kendo UI  Mobile skin or theme you are using in your application. If you have applied the flat skin, then you can change the background color of the PullToRefresh element through css targeting the .km-flat .km-scroller-pull classes:

.km-flat .km-scroller-pull {
background-color:red;
}

Regards,
Tina Stancheva
Telerik

 

 

[André]

Hi Tina. Thanks for your response.

 

Yes I'm using flat skin, but this code only change the color of the circle on left side of the message..

 I want to change the whole background of the "container" where the message appears, maybe it's a div where the text is put..

 

:/

[Martin Yankov]

Hello Andre,

Can you please provide a sample application, so that I can reproduce what you are seeing? In my tests, this selector works exactly as you want. You can take a look in this Dojo example. In the example I have omitted the .km-flat part since the example doesn't use the flat theme, but the effect is the same.

I'm looking forward to your reply.

Regards,
Martin Yankov
Telerik

 

 

[André]

Hi Martin,

 You are not using flat skin. If you change to flat, the arrow will be inside of a circle and only the inner color of the circle will be changed..

[Martin Yankov]

Hello Andre,

I contacted the dev team about this and it seems the flat skin is simply designed in such a way that it forces the pull to refresh place takes the background of the view itself. The only way to achieve what you want to do with this theme is to override the skin hard. Note that this means there can be potential problems with future releases and has not been extensively tested:

.km-flat .km-scroller-pull {
    position: absolute;
    left: 0px;
    margin-left: 0px;
    border-radius: 0px;
    height: 40px;
    width: 100%;
    background-color: red;
}

This basically expands the circle to take the whole place like in the normal theme. However, you should be aware that this is a custom solution and our dev team can't guarantee it's future proof.

Let me know if this works for you.

Regards,
Martin Yankov
Telerik

 

 

[André]

Hi Martin.

 

Thanks for your response.

I'm thinking about that and don't know what to do right now..

thanks anyway..

[Martin Yankov]

Hello Andre,

My suggestion would be to keep this, but remember it as a custom change on Kendo UI's theme. Just keep in mind that if something goes wrong when you update Kendo UI you can always remove it and the pull to refresh will look okay.

Don't hesitate to ask should you have any other questions.

Regards,
Martin Yankov
Telerik