How to create a vertical separator for single ion-item


#1

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…

image

image

Please friends i need your support.


#2

Keep that calendar within and try it… I am not sure… Just a suggestion


#3

Ok I’ll try it. can you suggest any options for the other 2 images on how to achieve them


#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) {
  }
}


#5

Thank you, i’ll try it out and let you know


#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) {
  }
}

#7

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


#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.