CODEWITHSUNDEEP
htmlionic-frameworksassionic2ionic3
Riccardo
Riccardo

Reputation: 253

Vertical line in ion-item list

I'm using Ionic and html and I'm trying to put a vertical line inside a ion-item in ion-list. I want something like this (the colored line after 'all-day'): https://cdn.cultofmac.com/wp-content/uploads/2015/04/IMG_1723-640x360.jpg

I have tried something like this:

<ion-list>
  <ion-item *ngFor=let item of items>
    <div class="verticalLine"></div>
    <div class="line-break">{{ item.longStringFromTSFile }}</div>
  </ion-item>
</ion-list>

// INSIDE SCSS FILE
.verticalLine {
  width:1%;
  height:75%;
  background:green;
  margin: auto;
}

But the vertical lines sometimes is too long, as you can see from this photo: verticalLines

What I really want is this: expected result

EDIT: Vertical line are not equals: new photo

Upvotes: 2

Views: 7504

Answers (2)

Akj
Akj

Reputation: 7231

Try something like example

HTML:

<ion-content padding>
<ion-list>
  <ion-item *ngFor="let item of items">
    <span item-start style="width:50px;">{{item.name}}</span>
    <div class="verticalLine"></div>
    <div item-end >{{item.age}}</div>
  </ion-item>
</ion-list>

css:

.verticalLine {
  width:1%;
  height:50px;
  background:green;
  margin-top: 0;
  position: relative;
  margin-left: 10%;
}

Upvotes: 4

The Dead Man
The Dead Man

Reputation: 5566

try this :

.verticalLine {
  width:1%;
  height:50px;
  background:green;
  margin: auto;
}

remember setting height 75% will be proportional to how big text is it.

Upvotes: 1

Related Questions