[BUG Solved ?]Since version 1.0.0-beta.12 the views are one upon the other


#1

Hello, my first tests with Ionic I made with version 1.0.0-beta.11.
There it was possible to display multiple views one underneath the other.
Since version 1.0.0-beta.12 the views are one upon the other.
Here is my example:

index.html:

MyBTests
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
 <ion-header-bar align-title="center" class="bar-positive">
    <h1 class="title">View-Test</h1>
</ion-header-bar>

<ion-view>
	<ion-content has-header="true" has-footer="false" padding="true" scroll="false">
	
		<ion-scroll has-bouncing="true" zooming="true" min-zoom="0.5" max-zoom="3" scrollbar-x="false" scrollbar-y="false" direction="xy" style="width: 100%; height: 100%">
		
			<ion-nav-view animation="fade-in" name="top">top</ion-nav-view>
			<ion-nav-view animation="fade-in" name="middle">middle</ion-nav-view>
			<ion-nav-view animation="fade-in" name="bottom">bottom</ion-nav-view>
			
		</ion-scroll>
	
	</ion-content>
</ion-view>

<script type="text/ng-template" id="top.html">
	<h2>Top View</h2>
	<p>Text1 (Top)</p>
</script>

<script type="text/ng-template" id="middle.html">
	<h2>Middle View</h2>
	<p>Text1 (Middle)</p>
	<p>Text2 (Middle)</p>
</script>

<script type="text/ng-template" id="bottom.html">
	<h2>Bottom View</h2>
	<p>Text1 (Bottom)</p>
	<p>Text2 (Bottom)</p>
	<p>Text3 (Bottom)</p>
</script>

app.js:
app.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise(’/go’);

$stateProvider.state(‘go’, {
url: ‘/go’,
views: {
‘top’: {
templateUrl: ‘top.html’
},
‘middle’: {
templateUrl: ‘middle.html’
},
‘bottom’: {
templateUrl: ‘bottom.html’
}
}
});
});

Please tell me what’s wrong.
Thanks in advance,
Jörg


#2

It seems to be ionic.css. If I use it from 1.0.0-beta.11 all looks fine.

View on Codepen


#3

I have now found the reason! (in ionic.css)

It is the positioning property in the ion-nav-view element:

ion-nav-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000; }

So all views go to the top. After deleting the Prop. all is working fine.
Thanks for reading :wink:


#4

I don’t know why you inserted the ion-nav-view in the css, but I think you have to delete it.