fix(slides): removed absolute positioning so the slides can be in fixed height

added a new test for this. Closes #642
This commit is contained in:
Brandy Carney
2015-11-25 12:06:49 -05:00
parent 46191bdd42
commit 90e136ec77
3 changed files with 46 additions and 12 deletions

View File

@ -249,9 +249,6 @@ button.swiper-pagination-bullet {
.swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom { .swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
@ -371,9 +368,6 @@ button.swiper-pagination-bullet {
backface-visibility: hidden; backface-visibility: hidden;
} }
.swiper-container-cube .swiper-cube-shadow { .swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000; background: #000;
@ -471,9 +465,6 @@ ion-slides {
} }
.swiper-container { .swiper-container {
position: absolute;
left: 0;
top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
@ -482,9 +473,6 @@ ion-slides {
} }
.swiper-wrapper { .swiper-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;

View File

@ -0,0 +1,12 @@
import {App} from 'ionic/ionic';
import {NgIf} from 'angular/angular';
@App({
templateUrl: 'main.html',
directives: []
})
class MyApp {
constructor() {
}
}

View File

@ -0,0 +1,34 @@
<ion-toolbar>
<ion-title>Fixed Height Slides</ion-title>
</ion-toolbar>
<ion-content>
<div style="height: 300px">
<ion-slides pager="true">
<ion-slide class="yellow">Slide 1</ion-slide>
<ion-slide class="blue">Slide 2</ion-slide>
<ion-slide class="red">Slide 3</ion-slide>
</ion-slides>
</div>
<ion-list>
<button ion-item *ng-for="#item of [0,1,2,3,4,5,6,7,8]">
{{ item }}
</button>
</ion-list>
</ion-content>
<style>
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
</style>