Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Force Onsen-UI splitter-side to be 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:

    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');
            }
        })
    


  • I had the same issue and found a fix.
    Just use collapse="" instead.
    Hope this works for you.



  • @jonas_arkulpa It worked, thank you very much!