javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(slides): swiper container should take up 100% height

Browse Source 
closes #14771
This commit is contained in:
Brandy Carney
2018-07-17 18:05:11 -04:00
parent 857b42d47a
commit 1d201ec468
2 changed files with 5 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/slides/slides.scss
View File

@ -8,6 +8,10 @@
display: block;
}
.swiper-container {
height: 100%;
}
// Pagination Bullets
// --------------------------------------------------

9
core/src/components/slides/test/app-intro/index.html
View File

@ -10,14 +10,11 @@
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
<style>
.scroll-inner,
.slides,
.swiper-container {
ion-slides {
height: 100%;
}
.swiper-slide {
display: flex;
display: flex;
flex-direction: column;
}
@ -25,13 +22,11 @@
.swiper-slide img {
max-width: 300px;
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-buttons slot="secondary">
@ -44,7 +39,6 @@
</ion-header>
<ion-content>
<ion-slides class="slides">
<ion-slide>
<img src="https://images.unsplash.com/photo-1490718687940-0ecadf414600?auto=format&fit=crop&w=1352&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
class="slide-image" />
@ -92,7 +86,6 @@
</ion-slide>
</ion-slides>
</ion-content>
</ion-app>
<script>
const slides = document.querySelector('.slides')