CODEWITHSUNDEEP
javascriptcssjquery-mobile
Terix
Terix

Reputation: 1387

JQuery Mobile destroyed my layout: how to disable autostyling?

I'm develping a website and I made all the design and the styling upon bootstrap and it is working fine. Then I wanted to add a panel for the mobile menu.

the panel is the one on the right of this example:jQuery Mobile panels, click on the plus sign

I took the panel that comes out clicking on the plus, and I worked to add it to my website (with my menu instead of the form inside the panel). It works fine, but adding the jQuery Mobile JS completely destroyed my layout, adding lot of ui-* classes around my code and the styles attached to them.

I've tried those things:

I just need the panel. I don't need all the creepy styling on the forms or other unwanted stuff.

Now I don't know what to do. There is another way to get this panel working withour all the mess? Why they did this js so intrusive?

Upvotes: 0

Views: 405

Answers (1)

Jordi Castilla
Jordi Castilla

Reputation: 27003

You can use :

data-role="none"

If you also want to disable mobile use in mobileinit event:

$.mobile.autoInitializePage = false;

If you have several elements use a function on start load page:

$(document).on('pagebeforecreate', function( event ) {
      // add the data-role="none" to desired elements...
      $( "input, select", event.target ).attr( "data-role", "none" );
});

Upvotes: 1

Related Questions