Button always needs to initialize form?

Form components
1

Hello support team.
I’m using jquery mobile with mobiscroll.

I think this code did not initialized button to mobiscroll control at header.
Should I have to declare mbsc-form in header too?

PS. I declared this code at mobileinit event.
$(document).on(“mobileinit”, function () {
$.mobile.ignoreContentEnabled = true;
});

<div mbsc-page class="md-page" data-role="page">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <div data-role="controlgroup" class="ui-btn-left">
                <button id="cancel" class="mbsc-ic mbsc-ic-material-close"></button>
        </div>
        <h1>TEST</h1>
        <div data-role="controlgroup" class="ui-btn-right">
                <button id="search" class="mbsc-ic mbsc-ic-material-search"></button>
        </div>
    </div>
    <div data-role="main">
        <div data-enhance="false" mbsc-form class="md-grid-basic">
                <div class="mbsc-form-group">
2

Hi @Ikbum_Kim,

Yes, the mobiscroll buttons don’t have an auto-initialization built in. You will have to wrap them in a Mobiscroll form to make them initialize. You can simply put the mbsc-form attribute to the header div under the page:

<div mbsc-form data-role="header" data-position="fixed" data-tap-toggle="false">

Also if you don’t want the jQuery Mobile styles to mix with the Mobiscroll styles, you should add a data-role="none" to the buttons. This will prevent the jQuery Mobile buttons from initializing automatically:

<button id="search" data-role="none" data-icon="material-search"></button>

Let me know if there are still questions!

Best,
Zoli