Display an avatar in the right of a colum

Hello

I need to position the icon that is on the right of the search bar to the right of the column. As you can see in the following image, it is in the left part of the third column, right next to the search bar.

icon1364×92 4.28 KB

How can I position it to the right?

This is the Main element

    const Home: React.FC = () => {
      return (
        <IonPage>
          <IonHeader>
            <IonToolbar>
            <IonGrid>
              <IonRow>
              <IonCol><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
                <IonCol><Busqueda /></IonCol>
                <IonCol className="ion-float-right"><ModalExample></ModalExample></IonCol>
              </IonRow>
            </IonGrid>
               
              <IonTitle></IonTitle>
            </IonToolbar>
          </IonHeader>
    
          <IonContent fullscreen>d
            <IonHeader collapse="condense">
              <IonToolbar>
                <IonTitle size="large"></IonTitle>
              </IonToolbar>
            </IonHeader>
            <ExploreContainer  />
          </IonContent>
        </IonPage>
      );
    };

The modal example is:

  export const ModalExample: React.FC = () => {
    const [showModal, setShowModal] = useState(false);
  
    return (
      <IonContent >
        <IonModal isOpen={showModal} cssClass='my-custom-class' animated={true}>
          <p>This is modal content</p>
          <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
        </IonModal>
        <IonAvatar onClick={() => setShowModal(true)} className="avatar">
        <img src={"./assets/icon/usuario.jpg"}   />
        </IonAvatar>
      </IonContent>
    );
  };

The CSS code:

.my-custom-class .modal-wrapper {
    background: #ffffff;
  
        height: 50%!important;
        width: 50%!important;
    
  }

  #ion-float-right{
    align-items: right;

  }

  #avatar{
    width: 100%;
    height: auto; 
    display: block;
  }

1 post - 1 participant

Read full topic