+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / jQuery Mobile CSS clashes/conflicts with RadMenu control

jQuery Mobile CSS clashes/conflicts with RadMenu control

4 posts, 0 answered
  1. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    20 Feb 2013
    Link to this post

    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.

  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    22 Feb 2013
    Link to this post
    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
  3. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    28 Feb 2013 in reply to Jen Peleva
    Link to this post

    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.

  4. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    05 Mar 2013
    Link to this post
    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
4 posts, 0 answered