Popover is always on center

Ionic Framework Ionic React
1

Hi, I’m using ionic 5 with react. I’m trying to make a component with a popover but the popover is always in the center (sorry for my English)

Here is my code

import React, { useState } from "react";
import { IonButton, IonIcon, IonPopover, IonContent, IonList, IonItem } from '@ionic/react'
import { ellipsisVertical } from 'ionicons/icons';
import "./ProductItem.css";

type props = {
  img: string;
  name: string;
  id: string;
  buyPrice: number;
  sellPrice: number;
  stock: number;
  category: string;
};

export const ProductItem = ({
  img,
  name,
  id,
  buyPrice,
  sellPrice,
  stock,
  category,
}: props) => {

  const [showPopover, setShowPopover] = useState(false);

  return (
    <div className="product-container">
      <div className="product">
        <div className="prod-data">
          <div className="prod-data-info">
            <div className="prod-photo" id="prod-photo">
              <span className="photo">{img}</span>
            </div>
            <div className="prod-name">{name}</div>
            <div className="prod-id">{id}</div>
            <div className="prod-bp">{buyPrice}</div>
            <div className="prod-sp">{sellPrice}</div>
            <div className="prod-stock">{stock}</div>
            <div className="prod-category">{category}</div>
          </div>
          <div className="prod-actions">
            <IonButton className="prod-action-button" size="small" color="primary">
              Add to Cart
            </IonButton>
            <IonPopover
              isOpen={showPopover}
              showBackdrop={false}
              keyboardClose={true}
              animated={true}
              mode="ios"
              onDidDismiss={e => setShowPopover(false)}
            >
              <IonContent>
                <IonList>
                  <IonItem>
                    lorem
                  </IonItem>
                  <IonItem>
                    ipsum
                  </IonItem>
                </IonList>
              </IonContent>
            </IonPopover>
            <IonIcon ios={ellipsisVertical} size="small" className="prod-extra-actions"
            onClick={() => setShowPopover(true)} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductItem;

Thanks!!

1 Like
2

This helped