CODEWITHSUNDEEP
cssionic-framework
IWI
IWI

Reputation: 1608

Ion-icon position beside ion-card

I have an ion-card in an ion-footer. It has an ion-textarea in it, as it will be used for a chat window. I am trying to place an icon beside the ion-card (an arrow) so a user can submit a message.

Whether I put the icon inside the ion-card, inside the ion-card-content, inside or outside the ion-footer, it just doesnt have the right positioning. If I put it inside the footer, it doesn't even show. If I put it outside the footer, it obviously rests on top or on the bottom of the footer.

<IonFooter style={{backgroundColor: 'white'}}>
  <IonCard style={{width: '75%'}}>
    <IonCardContent>
      <IonTextarea
        placeholder="Enter message here..." 
        value={text} 
        ionChange={e => setText(e.detail.value)} 
      />
    </IonCardContent>
  </IonCard>
  <IonIcon icon={arrowForwardSharp} size={"large"} color={"black"} />
</IonFooter>

Inside the footer (its below but you can't see it for some reason, even if i use a black icon) inside footer Outside the footer (strangely places in a black box) outside the footer

Upvotes: 2

Views: 874

Answers (1)

uKioops
uKioops

Reputation: 354

You can try by adding a grid inside you ionCard and adapt the number of col

If you want the icon separated from the textarea

<ion-footer>
<ion-card>
  <ion-card-content>
    <ion-grid>
      <ion-row>
        <ion-col><ion-textarea placeholder="Enter message here..."></ion-textarea></ion-col>
        <ion-col>
          <ion-item><ion-icon name="arrow-forward"></ion-icon></ion-item></ion-col>
      </ion-row>
    </ion-grid>
    
  </ion-card-content>
</ion-card>
  </ion-footer>

If you want the icon "inside" :

<ion-item>
 <!-- <ion-label position="floating">Write Here</ion-label> -->
 <ion-textarea></ion-textarea>
 <ion-icon name="send" color="primary" slot="end"></ion-icon>
</ion-item>

Upvotes: 2

Related Questions