Applying another CSS file to a specific block .net

Question

I used bootstrap.css in my master page to generate header content. Then, I created a web page using that master page(I need to use the same header content which uses bootstrap.css file). I want to create the another content (body content) in the same page, but this content will use jquery-mobile.css file. But when I use this css file in the same page, the header content is changing according to jquery-mobile.css style (I don't want it to be changed). Is there any way to apply jquery-mobile.css file to a specific block?

Answer 1

To find out more read my other article/answer: jQuery Mobile: Markup Enhancement of dynamically added content

Solutions

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

• Method 1:

  It can do it by adding this attribute:

  data-enhance="false"
  

  to the header, content, footer container.

  This also needs to be turned in the app loading phase:

  $(document).one("mobileinit", function () {
      $.mobile.ignoreContentEnabled=true;
  });
  

  Initialize it before jquery-mobile.js is initialized (look at the example below).

  More about this can be found here:

  http://jquerymobile.com/test/docs/pages/page-scripting.html

  Example: http://jsfiddle.net/Gajotres/UZwpj/

  To recreate a page again use this:

  $('#index').live('pagebeforeshow', function (event) {
      $.mobile.ignoreContentEnabled = false;
      $(this).attr('data-enhance','true');
      $(this).trigger("pagecreate")
  });
  

• Method 2:

  Second option is to do it manually with this line:

  data-role="none"
  

  Example: http://jsfiddle.net/Gajotres/LqDke/

• Method 3:

  Certain HTML elements can be prevented from markup enhancement:

   $(document).bind('mobileinit',function(){
        $.mobile.page.prototype.options.keepNative = "select, input";
   });    
  

  Example: http://jsfiddle.net/Gajotres/gAGtS/

  Again initialize it before jquery-mobile.js is initialized (look at the example below).

Conclusion

In your case, use solution 1. It will prevent jQuery Mobile from enhancing your header.

Answer 2

I wrote an answer about similar issue.

Load an external CSS for a specific DIV

I believe this should solve your problem.

Make sure to verify that the CSS file will always return "Access-Control-Allow-Origin" in the response header.

Good luck!