Ion-slide style width is set automatically
Solution 1
If it is not the width
you need then just change it as shown below.
Note: There are No Saas
variables for this
your-page.scss
.md,
.ios,
.wp {
.swiper-slide .swiper-slide-active{
width: 100px;//your width here
}
}
Note: If above was not working then you must use width: 100px !important;
. No other option where I can think of.
Solution 2
you can address the ion tags directly in Ionic 3!
A more dynamic solution would be using unset value for it.
Just try to write in your yourpage.scss:
ion-slide {
width: unset !important;
}
and it should remove it!
Solution 3
Try this:
ion-slide >:first-child {
width: 100%;
}
BinaryTox1n
Updated on June 06, 2022Comments
-
BinaryTox1n almost 2 years
I recently updated my Ionic 2 project to Ionic 3, and the changes to ion-slides have broken my app.
Specific widths are being set in the style tags on the slides when the app loads, and it's breaking my styles.
This is what I have in my HTML:
<ion-slides pager> <ion-slide *ngFor="let image of offer.Gallery"> <img [src]="image.Url"/> </ion-slide> </ion-slides>
And this is how it renders:
<ion-slides pager="" class="slides slides-md slides-43" ng-reflect-pager=""> <div class="swiper-container swiper-container-horizontal"><div class="swiper-wrapper"> <ion-slide class="swiper-slide swiper-slide-active" style="width: 171px;"> <div class="slide-zoom"> <img src="IMG"> </div> </ion-slide> </div> ... Pagination ... </ion-slides>
You'll notice that somehow the ion-slide tag has a
style="width: 171px;"
set on it. What is causing this and is there a way to turn it off?