CODEWITHSUNDEEP
javascriptjquery-uihtmljquery-mobile
Jitendra Vyas
Jitendra Vyas

Reputation: 152637

In jquery mobile how to prevent to add some specific classes to elements?

For example in this case

enter image description here

I just don't want the class ui-shadow in the element and without overriding the css.

I tried data-shadow="false" but it doesn't hide the shadow. is there any other attribute to do this?

Upvotes: 3

Views: 3547

Answers (2)

stevenwanderski
stevenwanderski

Reputation: 128

You must apply the data-shadow="false" to the modal container (the element which has the data-role="popup" attribute).

Example:

<a href="#modal-foo" data-rel="popup">Trigger</a>

<div id="modal-foo" data-role="popup" data-shadow="false">
  Crazy modal stuff!
</div>

Upvotes: 2

Phill Pafford
Phill Pafford

Reputation: 85308

I'm not sure you can remove just one class the jQM adds without the use of jQuery or rolling your own theme.

For native elements you have the option to set the attribute like this:

 data-role="none"

Docs:

You could roll your own theme with the new jQM Theme Roller:

Or (Not sure if this is the best solution as it will probably break something) remove the CSS for ui-shadow but I wouldn't opt for this.

Last use jQuery and remove the class

$('$element_id').removeClass('ui-shadow');

// this might need a refresh as well
$('#page_id').trigger('create');

Since I see it's a list you could refresh like this as well

 $('ul').listview('refresh');

Upvotes: 8

Related Questions