Hi, I have been playing with the split view, and started looking at the routing. I wanted to set up a "main layout" splitview, and then use the routing to inject various views into it at runtime, as in this Plunk.
So, in the layout view (layout.html), I have
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<h1 style="text-align: left" class="title">Main</h1>
</ion-header-bar>
<ion-content >
<!-- Inject Main view here -->
<ion-nav-view name='main'></ion-nav-view>
</ion-content>
</ion-side-menu-content>
<ion-side-menu width=200 expose-aside-when='(min-width:300px)'>
<ion-header-bar class="bar-royal">
<h1 style="text-align: left" class="title">Options</h1>
</ion-header-bar>
<ion-content>
<!-- Inject Side options vew here -->
<ion-nav-view name='options'></ion-nav-view>
</ion-content>
</ion-side-menu>
The routes are setup in script.js...
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view1', {
url: '/',
views: {
'main': {
templateUrl: 'mainv1.html'
},
'options': {
templateUrl: 'optionsv1.html'
},
}
});
$urlRouterProvider.otherwise('/');
});
The views seem to get in there fine, but I seem to loose the scrollbars in the splitview (see the righthand view where I have added 100 <div>
elements.
Anyone know if there is a way to do the above and have the vertical scroll working?
Thanks in advance for any help!