I’m using Ionic version 3
how to keep scrolling to the below part i mean only to the ion-list not to the calendar
and also how can i achieve the below 2 formats using “ion-list” or do i need to do anyother way to achieve this thing…
Please friends i need your support.
Keep that calendar within and try it… I am not sure… Just a suggestion
1 Like
Ok I’ll try it. can you suggest any options for the other 2 images on how to achieve them
Nexi
March 22, 2018, 7:53am
4
For the list items you could use something like this:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
template: `
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<p item-left class="list-time purple-border">
all day
</p>
Birthday
</ion-item>
<ion-item>
<p item-left class="list-time orange-border">
all day
</p>
Tax day
</ion-item>
<ion-item>
<p item-left class="list-time purple-border">
<span class="bold">8:00 PM</span><br>
11:00 PM
</p>
Another Task
</ion-item>
</ion-list>
</ion-content>
`,
styles: [`
.list-time {
width: 70px;
min-height: 2.3em;
}
.list-time.purple-border {
border-right: 2px solid purple;
}
.list-time.orange-border {
border-right: 2px solid orange;
}
.list-time .bold {
color: black;
}
`]
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
}
1 Like
Thank you, i’ll try it out and let you know
Nexi
March 22, 2018, 3:41pm
6
Here is a solution for your fixed calendar:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
template: `
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<div class="fixed-container">
<div class="calendar">
<p padding>Calendar</p>
</div>
<ion-scroll class="scroll-container" scrollY="true" zoom="false">
<ion-list>
...
</ion-list>
</ion-scroll>
</div>
`,
styles: [`
...
.fixed-container {
height: 100%;
display: flex;
flex-direction: column;
}
.scroll-container {
height: 100%;
}
.calendar {
margin: 70px 10px 10px 10px;
height: 200px;
background-color: lightgreen;
}
`]
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
}
Thanks for nailing it bro… from here on i can go further
and one question is that the below events entirly can i buiild it on a custom component. will it be a better idea
Nexi
March 22, 2018, 9:18pm
8
You could try that but it could be difficult in combination with ion-list, because if I remember correctly, ion-list looks for ion-items as direct children for styling purposes.
1 Like