Search code examples
javascriptcordovaonsen-ui

Onsen-UI splitter-side always closed


I'm currently developing a phonegap app with OnsenUI and I want to use ons-splitter to create a sliding menu without angular. However, I have an issue with splitter-side as it seems to be developed in a way where it is always open in one of the phone orientations (landscape or portrait). According to the docs if "collapse" param is undefined it should be always collapsed by default, but it becomes always open instead. I deployed a workaround in javascript by changing this param on the fly depending on the phone orientation, but it lags a bit and is not satisfying enough.

The question is this: is it possible to force the splitter-side to open only on swipe? Or is there a better solution to make it work?

HTML Code:

<ons-splitter var="splitter">
    <ons-splitter-side id="side_splitter" side="left" swipeable width="200px">
        <ons-page>
            <ons-toolbar>
                <div class="center">Menu</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item modifier="chevron">
                    Page 1
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    Page 2
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="page1.html">
    </ons-splitter-content>
</ons-splitter>

Javascript Workaround:

ons.orientation.on('change', function(e){
        if (e.isPortrait){
            console.log('portrait');
            $("#side_splitter").attr('collapse','portrait');
        } else {
            console.log('landscape');
            $("#side_splitter").attr('collapse','landscape');
        }
    })

Solution

  • Some good guy on onsen forums answered my question. Docs are misleading. Leaving collapse param undefined actually doesn't work, you have to define it as an empty string:

    <ons-splitter-side id="side_splitter" side="left" collapse="" swipeable width="200px">
    

    Hope this helps someone.