CODEWITHSUNDEEP
jqueryjquery-mobilejquery-selectors
Brian
Brian

Reputation: 4418

How can I remove JQM styling on all children elements of div

So I have a mobile app that uses JQM and twitter bootstrap, Basically I use JQM for navbars, navigation, etc but I don't want the content styled below a certain element called .content

<div data-role="page" id="home">

    <div class="content clearfix">

     //bunch of dom stuff here

    </div>
</div>

There are a few strategies I've tried that have failed

  1. Wrapping the entire Jquery mobile css style sheet in with a :not(.content) selector somehow
  2. Trying to select elements with any ui-* attribute and remove that class
  3. Add a data-role="none" to all elemnets below .content

I feel like the first would be fastest but not quite sure how to do it heres what i have for method #3 On the event pagebeforecreate add data=role="none" to all elements

 $(document).on('pagebeforecreate', "[data-role=page]", function() {

   $('.content *',$(this)).each(function(index, value) {
         $(this).attr('data-role','none');
    });

});

Upvotes: 1

Views: 460

Answers (1)

Nirmal Patel
Nirmal Patel

Reputation: 5168

You can set data-enhance="false" on your container element. You will also need to enable to Global Configuration flag - ignoreContentEnabled

Be warned that setting ignoreContentEnabled causes performance degradation in page enhancement process.

Read the Enhancement Section of Data Attributes Documentation

Upvotes: 3

Related Questions