All Collections
Training and guides
Forms
Using Forms with jQuery Mobile
Using Forms with jQuery Mobile

Learn how to prevent jQuery Mobile from enhancing form elements when Mobiscroll Forms is used

Istvan Halmen avatar
Written by Istvan Halmen
Updated over a week ago

When jQuery Mobile is loaded on a page, it will automatically enhance certain page elements, including form controls. If you're using Mobiscroll Forms on the same page, the form controls will end up having both jQuery Mobile and Mobiscroll stylings applied.

To prevent this, you need to tell jQuery Mobile to prevent enhancement on certain parts of the page.

Method 1: Using data-enhance="false"

Using the data-enhance="false"  attribute with the ignoreContentEnabled option.

You can add the data-enhance="false" attribute on the Mobiscroll Form container. This will prevent jQuery Mobile to enhance the container and everything inside.

To make this work, you will also need to set the ignoreContentEnabled option in the mobileinit event.

Example:

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4-5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(document).on("mobileinit", function () {
            $.mobile.ignoreContentEnabled = true;
        });
    </script>
    <script src="http://code.jquery.com/mobile/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-enhance="false" mbsc-form>
            <label>
                Email
                <input type="email">
            </label>
            <label>
                Password
                <input type="password">
            </label>
        </div>
    </div>
</body>

</html>

Method 2: Using the keepNative option

Using the keepNative option.

You globally disable enhancement on certain elements with the keepNative option of jQuery Mobile inside the mobileinit  event:

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4-5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(document).on("mobileinit", function () {
            $.mobile.page.prototype.options.keepNative = "select,input,button";
        });
    </script>
    <script src="http://code.jquery.com/mobile/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div mbsc-form>
            <label>
                Email
                <input type="email">
            </label>
            <label>
                Password
                <input type="password">
            </label>
        </div>
    </div>
</body>

</html>

What's next?

Did this answer your question?