Sometimes ion-slides on iOS are deformed (ion-slide have wrong width and is overflowed).
Setting width: 100% !important and overflow: hidden fix the problem partially but brings up a new bug which is the white space to death screen after the last slide.
Using the slides.update() function doesn't fix the problem (ionic 3).
How to solve this issue?
My ion-slides were hardcoded in the HTML page.
So, I had packed the slides data into an array in the ts file and looped the ion-slide tag using *ngFor with 1s delay after the ionViewWillLoad() had fired.
TS code:
...
slides = null;
...
ionViewWillEnter() {
setTimeout(() => {
this.slides = [
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
},
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
},
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
}
]
}, 1000);
}
HTML code:
<ion-slides *ngIf="slides" pager>
<ion-slide *ngFor="let slide of slides">
<img [src]="slide.imgSrc" class="slide-image" />
<h2 class="text-heading">{{ slide.header }}</h2>
<p class="text-light" text-capitalize [innerHTML]="slide.text"></p>
<span (click)="goToMenu()" class="text-light" text-capitalize>{{ slide.action }}</span>
</ion-slide>
</ion-slides>
Related
During opening antd modal I can see for 10ms that my modal is increased and displays not the first page of the carousel inside.
Here I have attached a Json file, which you can play in your Chrome DevTools (F12 -> Performance -> Load profile). Described problem appears on 1150ms. Here is the link to the codesanbox where you can play with my code. I found that the modal increases because my form layout equal to "vertical", but I still didn't get why the last page of my carousel appears first. I am thinking of some hooks in React like useLayoutEffect to render it correctly, however it seems to my as a antd bug, or my mistake somewhere and I don't want to overload my code with useless hooks.
Here is the code for that who won't open codesanbox:
import "./styles.css";
import React, { useState, useRef } from "react";
import { Modal, Carousel, Form, Button, Input, Image } from "antd";
export default function App() {
const [modal, setModal] = useState<boolean>(false);
const [pageOneForm] = Form.useForm();
const [pageTwoForm] = Form.useForm();
return (
<>
<Button onClick={() => setModal(true)}> open </Button>
<Modal
width={500}
centered
closable={false}
title={"Title of my modal"}
open={modal}
onCancel={() => setModal(false)}
okButtonProps={{ style: { display: "none" } }}
>
<Carousel dotPosition="top" swipeToSlide draggable arrows>
<div>
<img alt="card1" src="card1.png" className="card" />
<Form
form={pageOneForm}
layout="vertical" //it makes my modal huge for few ms
>
<Form.Item
label="Some input for 1 page"
name="carteVitale"
rules={[{ required: true, message: "" }]}
>
<Input />
</Form.Item>
</Form>
</div>
<div>
<img alt="card2" src="card2.png" className="card" />
<Form form={pageTwoForm} layout="vertical">
<Form.Item
label="Some input for 2 page"
rules={[{ required: true, message: "" }]}
>
<Input />
</Form.Item>
</Form>
</div>
</Carousel>
</Modal>
</>
);
}
I expect to render this modal without unplanned modal shakes
UPDATE:
Size of modal can be fixed by adding two keys to Carousel component:
<Carousel
adaptiveHeight={false}
lazyLoad="progressive"
...
or by playing with css:
<Carousel
initialSlide={0}
lazyLoad="ondemand"
className="cards-container"
...
<Form.Item
className="no-wrap"
...
and css will looks like:
.cards-container {
animation: fadein 0.5s ease;
position: relative;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.no-wrap label {
white-space: nowrap;
overflow: hidden;
}
I'm trying to pass the index of active slide when he change, in ionic-framework using vuejs 3, but i don't know how.
Someone can please help me?
<ion-slides :options="slideOpts" #ionSlideDidChange="SomeAction()" >
<ion-slide v-for="(item, index) in imgsSrc" :key="index">
<img :src="item" alt="" srcset="" >
</ion-slide>
</ion-slides>
I try to use getActiveIndex(), the native method, with ref="slider" but i get an error saying that getActiveIndex() is not a function.
methods:{
SomeAction(){
console.log(this.$refs.slider.getActiveIndex());
}
},
After the slides are initialized and loaded, get the object and assign it to a ref in the didLoad function; you will then have access to the Swiper object and can utilize the documented API if you like
<ion-slides
#ionSlideDidChange="change"
#ionSlidesDidLoad="didLoad"
:options="slideOpts"
>
<ion-slide v-for="(item, index) in ['1', '2', '3', '4']" :key="index">
<div class="my-slide">
<p>item {{ item }}</p>
</div>
</ion-slide>
setup() {
const _swiper = ref<any>(null);
return {
slideOpts: {
speed: 400,
},
_swiper,
didLoad: (e: any) => {
_swiper.value = e.target.swiper;
console.log(_swiper.value);
},
change: () => {
console.log(_swiper?.value?.activeIndex);
},
router: useRouter(),
};
},```
i am creating an Listing ionic application where i am displaying feeds from an API in the home page. It also has some filter options which is an actionsheet with options such as near by, populer and so on. What i want to do is when user click one of the filter for example populer, i want to do display the new feeds on the same page. How can i do so ??
My code base is as below
home.ts
constructor(....){
this.getFeeds();
}
//make api call to get the feeds
getFeeds(){
const data = localStorage.getItem('userToken');
this.userPostData.api_token= data;
this.authService.postData(this.userPostData,'feeds').then((result)=>{
this.responseData = result;
})
}
//Feeds by location
//Actionsheet
filters() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Sort Events by',
buttons: [
{
text: 'Location',
icon:'pin',
handler: () => {
//Make api call to feeds based on location
}
},
{
text: 'Popularity',
icon:'people',
handler: () => {
//Make api call to feeds based on location
}
}
]
});
actionSheet.present();
}
And my home.html is
<ion-card *ngFor="let item of responseData?.feed" tappable (click)="viewDetail(item.id)">
<div class="event-image-holder search-list">
<img src="http://localhost:8000/{{item.photo_url}}"/>
<div class="event-attendee-count">
<ion-icon name="people"></ion-icon> {{item.attendees.length}} are going
</div>
</div>
<ion-card-content>
<div class="event-info">
<div class="event-time">
<!-- 04 Feb -->
{{item.gmt_date_set | date:'dd MMM'}}
</div>
<div class="event-descp">
<h2>{{item.title}}</h2>
<p>
{{item.club.name}}
</p>
</div>
</div>
</ion-card-content>
</ion-card>
After some research here and there tutorials from youtube and udemy, i found that when ever you change the data of the variable it automatically change on the view page.
So in my case if i override the data of this.responseData it will automatically updated on the view page with out much doing.
I am unable to view object in the page. Can someone help to take a look what am i missing here ? I have my code in code pen http://codepen.io/ccrash/pen/wWXVGj . Really need someone to help out. When I clicked on the list in mainpage, it should bring me to the second page where user details should be displayed. But, I am not seeing any details here.
In App.js
.state('app.person', {
url: "/person/:personId",
views: {
'menuContent': {
templateUrl: "templates/people-detail.html",
controller: 'PersonDetailCtrl'
}
}
})
Controller.js
.controller('PersonDetailCtrl', function($scope, $stateParams, Session, $state, $ionicHistory) {
var Persons = [
{id: 1, name: 'Mickey', Tel: '12345'},
{id: 2, name: 'Donald', Tel: '23444'},
{id: 3, name: 'Goofy', Tel: '12323'}
];
$scope.person = Persons[$stateParams.personId];
})
In people-detail.html
<ion-content ng-controller="PersonDetailCtrl" class="background">
<div>
<i class="{{person.id}}"> </i>
</div>
<div>
<i class="{{person.name}}"> </i>
</div>
</ion-content>
This $scope.person = Persons[$stateParams.locationId]; should be $scope.person = Persons[$stateParams.personId];
I would like to implement $ionicPopup with radio buttons. However, what I tried doesn't work as expected. I should have 3 options to choose, so if I choose option '1' and press 'Yes', I would like the console log to print out '1'...so far I can't seem to connect the radio buttons with it's equivalent scope variable in controller.
How can I reflect changes from radio button partial that loads in ionic popup?
In controller:
$ionicPopup.confirm({
templateUrl: 'templates/partials/orderPopup.html',
title: 'XYZ?',
scope: $scope,
buttons: [{
text: 'Yes',
type: 'button-positive',
onTap: function (e) {
console.log($scope.choice);
}
}, {
text: 'No',
type: 'button-default',
onTap: function (e) {
$state.go('shoppingCart');
}
}]
})
And in view:
<ion-list ng-controller="shoppingCartCtrl">
<style>
.wrapping-list .item-content, .wrapping-list .item {
overflow: initial;
white-space: initial;
}
</style>
<ion-radio class="wrapping-list" ng-model="choice" ng-value="'1'">Option1</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice" ng-value="'2'">Option2</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice" ng-value="'3'">Option3</ion-radio>
</ion-list>
If I make a $scope.choice = 2 before the popup call, then I can see the option 2 being selected as a default, however, upon clicking any other option and then clicking OK, console returns 2
The issue is with ng-model. The 2-way binding in angular works when he model is an object which can be updated via reference from view as well as controller. So if you change your model as below, your code will work:
Controller
$scope.choice = {
value: '2'
};
HTML:
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'1'">
Option1
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'2'">
Option2
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'3'">
Option3
</ion-radio>
I have created a codepen to demonstrate the working code here: http://codepen.io/addi90/pen/aNroNN?editors=1010