I'm developing an ionic 4 mobile app with an ion-slider that slides horizontally. the slider is working. but I couldn't stop the sliding at the last slide. I need to lock my last slide at the slider.
<div style="float: left; width: 100%">
<ion-slides [options]="sliderConfig" style="width: 100%" #slides>
<ion-slide style=" margin-left: -30%">
<div style="float:left">
<!-- <ion-card style="width: 180px; height: 200px;" >
<ion-card-content> -->
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/f1.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<!-- <img src="../../../assets/food.jpg" style="width:220px; height:200px"/> -->
<ion-label>
Promo
</ion-label>
<!-- </ion-card-content>
</ion-card>
-->
</div>
</ion-slide>
<ion-slide style="margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/food.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
New
</ion-label>
</div>
</ion-slide>
<ion-slide style="width:100%; margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/sri.jpg" style="width:100%; height:100%" />
</ion-avatar>
<ion-label>
Sri Lankan
</ion-label>
</div>
</ion-slide>
Please try the below code. I did some modification.
<div style="float: left; width: 100%">
<ion-slides style="width: 100%" #slides>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
App Url = enter link description here
editor Url = enter link description here
You have used margin left 25%. that is the issue i think
Related
I am trying to implement ngx-infinite-scroll
I am unable to get it to do what I want which is listen to my browser or window scroll so I may scroll content and load when needed.
What's happening is can implement this library ONLY when I set the scroll to listen to some other div so the result is two scroll bars (1) browser window scroll bar (2) content div scroll bar - this is not desirable and creates a real messy UX.
You will notice a setting in the template "scrollWindow" I have tried changing this value without any success I'm not too sure what i'm doing wrong here...
Environment
Angular 8 with Angular Material
Template and Styling:
.container {
height: 100vh;
width: 70vw;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
overflow-y: auto;
}
HTML
<app-navigation-bar></app-navigation-bar>
<app-userpost></app-userpost>
<div *ngIf="loading">
<app-progress-spinner></app-progress-spinner>
</div>
<!-- infinite scroll div -->
<div
class="container"
infiniteScroll
[infiniteScrollContainer]="container"
[scrollWindow]="false"
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="5"
[infiniteScrollThrottle]="300"
(scrolled)="onScrollDown()"
>
<mat-card *ngFor="let post of postObjects">
<mat-card-header>
<img mat-card-avatar src={{post.profile_picture}} alt="no profile image">
<mat-card-title>{{post.email}}</mat-card-title>
<mat-card-subtitle> {{post.upload_date | date:"medium"}} </mat-card-subtitle>
</mat-card-header>
<img mat-card-image src={{post.photo}}>
<mat-card-content>
<p>
{{post.author_comment}}
</p>
</mat-card-content>
<!-- This fills the remaining space of the current row -->
<mat-card-actions class="action-buttons">
<button mat-button color="primary" (click)="post_like(post.post_id)">
<mat-icon>thumb_up_alt</mat-icon> {{post?.post_likes?.length}} Likes
</button>
<button mat-button color="primary" (click)="post_dislike(post.post_id)">
<mat-icon>thumb_down</mat-icon> {{post?.post_dislikes?.length}} Dislikes
</button>
<button mat-button color="primary">
<mat-icon>share</mat-icon> Share
</button>
<a mat-button color="primary" target="_blank">
<mat-icon>visibility</mat-icon> View
</a>
</mat-card-actions>
<mat-accordion>
<div *ngIf="post?.post_comments?.length > 0">
<mat-expansion-panel>
<mat-expansion-panel-header>
<div class="comment-header">
<span class="label label-primary">{{post?.post_comments?.length}} Comments</span>
</div>
</mat-expansion-panel-header>
<mat-list>
<div *ngIf="post?.post_comments?.length > 0">
<div *ngFor="let postSection of post.post_comments; let i = index">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header collapsedHeight="80px" expandedHeight="30px">
<mat-panel-title>
<div style="max-height: 53px; text-overflow: ellipsis">
<img mat-card-avatar
src="https://source.unsplash.com/random/200x200"
style="padding: 5px">
<strong
style="padding: 5px">{{postSection?.comment_author}}</strong>
<small style="padding: 5px">
{{postSection?.date | date:"medium"}}</small>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<hr>
<p>{{postSection?.post_comment}}</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</mat-list>
</mat-expansion-panel>
</div>
</mat-accordion>
<form [formGroup]="PostComment">
<div class="input-group">
<div id="container">
<div id="profile_img">
<div class="actions">
<div class="avatar">
<img class="d-flex mr-3 rounded-circle" src={{userAvatar}} alt="Cannot Load Photo"
width="30" height="30">
</div>
</div>
</div>
<mat-form-field class="example-full-width" style="margin-top: 10px;">
<textarea matInput formControlName="post_comment" #message maxlength="500"
placeholder="Leave a comment"></textarea>
<mat-hint align="start">
<strong>Say something constructive..</strong>
</mat-hint>
<mat-hint align="end">{{message.value.length}} / 500</mat-hint>
</mat-form-field>
<div class="post-button">
<button mat-raised-button (click)="createComment(post.post_id)">Post</button>
</div>
</div>
</div>
</form>
</mat-card>
<div *ngIf="end_of_data">
<strong><h3>No More Data To Load..</h3></strong>
</div>
</div>
change this [infiniteScrollContainer]="container" by [infiniteScrollContainer]="'.container'"
I'm using Ionic version 4 and I want my login form in the application to be vertically centered.
I've tried many solutions present in stack overflow but looks like all works for Ionic version 3 and also tried some of the CSS tricks like margin 0 auto; and
display:flex;
justify-content:center !important;
align-content:center !important;
But didn't work for me.
This is how my forms looks like, I'm using bootstrap additionally and have no custom css classes added into the template.
Here's my template code.
<ion-content color="light">
<ion-grid>
<ion-row class="ion-justify-content-center">
<ion-col size-xs="9" size-md="9">
<form>
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Enter AccountID"
autocomplete="off"
/>
</div>
<div class="form-group">
<input
type="email"
class="form-control"
placeholder="Enter Email"
autocomplete="off"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
placeholder="Enter Password"
autocomplete="off"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
I did it using this styles
ion-grid{
height: 100%;
}
ion-row{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
My code works in Ionic v4
ion-grid{
height: 100%;
}
ion-row{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<ion-content>
<ion-grid class="ion-text-center">
<ion-row>
<ion-col size="12">
blaaaaaaaaaa
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Try this code:
.vcenter{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
I'm trying to create a list of avatars, and each avatar to appear in the right of the previous avatar. When an avatar reaches the end of the screen, the user will be able to scroll left or right to see more avatars.
I achieved this with the following code which worked in the previous ionic grid version, and now no longer works and when an avatar reaches the end of the screen, a new line is created instead of keep added to the same line with an option to scroll horitzonally:
<ion-scroll scrollX="true" class="chooseBg" style="height:70px">
<ion-row>
<ion-col *ngFor="let avatar of avatars"
style="padding-right:0">
<ion-item>
<ion-avatar>
<img
[src]="avatarImage(avatar)"/>
</ion-avatar>
</ion-item>
</ion-col>
</ion-row>
</ion-scroll>
Any ideas how I can create hortizonal scroll of items using latest ionic grid system? (Ionic 2.2)
This is my Horizontal Scroll with clickable Cards in it:
<ion-scroll scrollX="true" class="item" style="width:100vw;height:100%;margin:0px;padding:0px;">
<ion-row>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Rap")'>
<img style="width:33vw;" src="assets/img/rap.png"/>
<div text-wrap class="card-title-mini">Rap</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Singing")'>
<img style="width:33vw;" src="assets/img/sing.png"/>
<div text-wrap class="card-title-mini">Singing</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Skateboard")'>
<img style="width:33vw;" src="assets/img/skateboarding.png"/>
<div text-wrap class="card-title-mini">Skateboard</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Workout")'>
<img style="width:33vw;" src="assets/img/workout.png"/>
<div text-wrap class="card-title-mini">Workout</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Drawing Tattoo")'>
<img style="width:33vw;" src="assets/img/drawingtattoo.png"/>
<div text-wrap class="card-title-mini">Drawing Tattoo</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Shuffle")'>
<img style="width:33vw;" src="assets/img/shuffle.png"/>
<div text-wrap class="card-title-mini">Shuffle</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Gaming")'>
<img style="width:33vw;" src="assets/img/gaming.png"/>
<div text-wrap class="card-title-mini">Gaming</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Beatbox")'>
<img style="width:33vw;" src="assets/img/beatbox.png"/>
<div text-wrap class="card-title-mini">Beatbox</div>
</ion-card>
</ion-col>
</ion-row>
</ion-scroll>
Well its hardcoded but you can fill it like you do with *ngFor as well.
this is my css:
ion-card {
position: relative;
text-align: center;
margin: 0;
}
.column-width {
width: 100px;
}
.card-width {
width: 33vw;
padding: 0px !important;
margin: 0px !important;
background-color : transparent;
color : transparent;
height: 33vw;
}
.card-title-mini {
position: absolute;
top: 45%;
font-size: 5vw;
width: 100%;
color: #fff;
font-weight: bold;
}
This scroll works on all devices and browsers.
Maybe my scroll might be helpfull for you.
I need to have a fixed element on a page, and then a scrollable list.
I added a ion-content inside the first ion-content. But it doesn't scroll.
<ion-view title="Bayonne" hide-back-button="true" id="page5" style="background-color:#1B463C;">
<ion-content scroll="true" padding="false" class="has-header">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
<ion-content id="contentInside">
<ion-list id="bayonne-list2">
<ion-item class="item-thumbnail-left " id="bayonne-list-item12" ui-sref="rempart">
<img src="img/S6OgBxiMQdSttmcgQNFJ_old.png">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item11" ui-sref="rempart">
<img src="img/0CoPf6OkTGWKNa0SUvI1_rempart.jpg">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left item-icon-right " id="bayonne-list-item7">
<img src="img/St3jeK3kRVC7bY3TODRt_tour.png">
<h2>Château-Vieux</h2>
<i class="icon ion-android-walk"></i>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item13">
<img src="img/1E4YdOePR62V8ZoECOuL_cloitre.jpg">
<h2>Cloître</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item5">
<img src="img/sDFRnANETvaagk5B01nZ_bayonne_cathedrale_et_cloitre_03-05-2012___11.JPG">
<h2>Cathédrale</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item6">
<img src="img/n3OwTRCOTDSW1V7q2Z3R_reduit.jpg">
<h2>Place du Réduit</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item14">
<img src="img/qeuF4erGTQOtqvgTUOD1_escalier.jpg">
<h2>Escaliers</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-content>
You cannot have a ion-content inside another ion-content it's not a good practice.
If you want a content to be static you can use ion-header with subheader class.
<ion-header class="bar bar-subheader">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
Now the image and button will be static in the header.
NOTE:
It is must to include has-subheader class in ion-content.
<ion-content class="has-subheader">
"Your content goes here"
</ion-content>
OK so I have the following code:
<ion-view hide-back-button="true", title="Test">
<ion-content>
<ion-slide-box>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
</ion-slide>
</ion-slide-box>
<div class="bar bar-dark">
<h1 class="title">Feed</h1>
</div>
<ion-list style="padding: 1px;">
<ion-item ng-repeat="test in tests" href="#/detail/{{work.id}}">
<br>
<br>
<h2>{{test.name}}</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I want the list to scroll independently of the rest of the view and for the bar and nothing above it to scroll -- ie I want them to be fixed. Any help would be greatly appreciated.
Simple fix, just use two ion-scrolls: see it here: http://play.ionic.io/app/85e2270b0b33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-view hide-back-button="true", title="Test">
<ion-scroll>
<ion-slide-box>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
</ion-slide>
</ion-slide-box>
<div class="bar bar-dark">
<h1 class="title">Feed</h1>
</div>
</ion-scroll>
<ion-scroll style="height: 500px">
<ion-list>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
</ion-list>
</ion-scroll>
</ion-view>
</body>
</html>