jQuery Mobile CSS clashes/conflicts with RadMenu control

Posted by Community Admin on 04-Aug-2018 01:42

jQuery Mobile CSS clashes/conflicts with RadMenu control

All Replies

Posted by Community Admin on 20-Feb-2013 00:00

I just implemented jQuery Mobile for one of my forms in my Sitefinity website and as soon as I applied the jQuery Mobile CSS to my Sitefinity website, I noticed that my RadMenu control CSS got messed up.  jQuery Mobile Form

Is there a way to get the RadMenu control to render correctly without conflicting with the jQuery Mobile CSS classes?

If so, what classes in the RadMenu need to be fixed to get this to render properly?

Thanks.

Posted by Community Admin on 22-Feb-2013 00:00

Hello Samir,

Please review the following thread by partners from falafel about avoiding javascript conflicts on Sitefinity pages:

http://blog.falafel.com/Blogs/george-saadeh/2012/05/09/using-jquery-and-other-javascript-libraries-in-sitefinity

Basically, it is good to load our jquery first and then all other external libraries.

Kind regards,
Jen Peleva
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 28-Feb-2013 00:00

In this case, the JavaScript is not what is conflicting with jQuery Mobile, but rather the CSS files.  If you look at this screen which contains a jQuery Mobile Form along with its associated jQuery Mobile CSS: jQuery Mobile Screen and compare it with another screen which does not have the jQuery Mobile CSS on it: Non-jQuery Mobile Screen, you will notice that the CSS renders differently (need to refresh/reload the screen between comparisons if viewing within the same browser instance).

 I basically need a solution to resolve this conflict in CSS between the jQuery Mobile CSS and the RadMenu CSS so that I can view the RadMenu control in the same manner without worrying about which screens are using jQuery Mobile.

 I have also attached screenshots for your review.

 Please advise.

 Thanks.

Posted by Community Admin on 05-Mar-2013 00:00

Hello Samir,

Actually, css inheritance cannot be stopped with a single setting. It is defined by the entire cs structure of the page. JQuery libraries set styles to unique css classes to prevent the styles from being applied to other elements. I observed the link of your site and noticed that you've set specific jquery classes to the body of the page and the wrapping div of the page. This is the reason why the navigation will also inherit jquery styles. I wouldn't suggest applying those classes to such global elements in the html hierarchy if not needed, because this will inevitably lead to child tags inheriting those stles as well. If it's important to have those css classes, set to the body and the wrapping div, then you will have to override the styles, which are applied to the navigation and shouldn't be. The other option is to define a load order for your css styles in the Theme of your project. This is done in a LoadOrder.xml file, which practically defines how your css files will be applied on the page (their order). If the styles for the naavigation are set after the Jquery styles, they will get applied on top of the jquery styles and will have bigger weight than those styles, so practically jquery css will not override your navigation styles.

Greetings,
Jen Peleva
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed