Need UI-Layout to be responsive

[RodolfoDiaz]

I am using UI-Layout directive for a web application that has two panels: a left side bar with a tree view (navigation) and a content view. The functionality works fine, and I can resize the panels, the directive is great, no trouble with that. I would like to support tablet/phone devices, and due to the screen size, I would like the panels to stack up for small screen size: the navigation panel to be first (top) and then the content panel at the bottom. I was able to do this, by using Twitter Bootstrap, but now that I am using UI-Layout it no longer works.

I've found UI-Layout sets as inline-style the width attribute. The CSS precedence is applied and the Bootstrap classes (such as col-md-3 or col-sm-xx) have no effect. In line style has higher precedence.

Is there a workaround? Is there a way to disable UI-Layout directive when the screen size is too small? for example 480px or less, so you can use responsive web design in those devices.

My code:

<main ui-layout ng-controller="TopNavController as vm">


        <section id="pageLayout" class="container-fluid" ui-layout="{flow : 'column', disableToggle : true}">
            <div id="sidebar" class="col-md-3" ui-layout-container size="25%" min-size="15%" ng-include="'components/layout/sidebar.html'"></div>
            <div id="content" class="col-md-9" ng-view="" ui-layout-container size="75%" min-size="40%"></div>
        </section>

[SomeKittens]

We don't currently have a way to disable the plugin completely. The only mobile options are to disable the chevrons.