jQuery Mobile CSS clashes/conflicts with RadMenu control
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.
Hello Samir,
Please review the following thread by partners from falafel about avoiding javascript conflicts on Sitefinity pages:
Basically, it is good to load our jquery first and then all other external libraries.
Kind regards,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.
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,