CODEWITHSUNDEEP
htmlcssangularionic-framework
IonicMan
IonicMan

Reputation: 892

How to position icon on the right side of ion-card-header?

This question may be a little stupid but I am not that familiar with CSS and googling the problem didnt get the desired result.

So I have this ion-card-header:

This is the code:

<ion-card-header>
      <ion-card-title>{{enActivity.customer}}</ion-card-title>
      <ion-card-title>{{enActivity.startTime | date :'HH:mm'}}</ion-card-title>
      <ion-card-title>Aktivitäten: {{enActivity.activities.length}}</ion-card-title>

      <ion-icon name="chevron-forward-outline"></ion-icon> 
</ion-card-header>

I would like to place the last item, the ion-icon on the right sideof the card-header. How do I achieve this? I am a little confused.

In the picture, I would like to place the icon in the marked position.

This is what I have tried so far

ion-icon {
  float: right;
}

Upvotes: 2

Views: 6323

Answers (5)

Amer Riaz
Amer Riaz

Reputation: 44

Separate the content and the icon into two Sections or Div's and use display flex

.ion-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
     }

Upvotes: 1

Yorbj&#246;rn
Yorbj&#246;rn

Reputation: 456

Try this

ion-card-header { position: relative }

ion-icon{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
}

Upvotes: 0

Omar Piga
Omar Piga

Reputation: 306

Try this:

<ion-card-header>
  <ion-card-title>{{enActivity.customer}}</ion-card-title>
  <ion-card-title>{{enActivity.startTime | date :'HH:mm'}}</ion-card-title>
  <ion-card-title>Aktivitäten: {{enActivity.activities.length}}</ion-card-title>

  <ion-icon className="center-right" name="chevron-forward-outline"></ion-icon> 

ion-card-header { position: relative }
.center-right{
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
}

Upvotes: 4

yasir ali
yasir ali

Reputation: 106

 <ion-card-header>
      <ion-card-title>{{enActivity.customer}}</ion-card-title>
      <ion-card-title>{{enActivity.startTime | date :'HH:mm'}}</ion-card-title>
      <ion-card-title>Aktivitäten: {{enActivity.activities.length}}</ion-card-title>

      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon> 
</ion-card-header>

 hope this will work

Upvotes: 0

Hanuma1999
Hanuma1999

Reputation: 11

.ion-card{
Flex-direction: column;
}

ion-icon{
Margin:10px;
 }

Upvotes: 1

Related Questions