Scrollable modal

Ionic Framework Ionic React
#1

Dear. I have a modal with a list but it does not show the complete list, how is it possible to make a drop-down (Scrollable ) modal?

Thanks in advance.

export const Categorias: React.FC = () => {
  const [showModal, setShowModal] = useState(false);
  return (
    <div id="columna3">
      <IonModal isOpen={showModal} cssClass='my-custom-class' animated={true} backdropDismiss={true}>
      <IonIcon icon={closeCircle} onClick={() => setShowModal(false)}></IonIcon>
        <div id="contenedor-central" >
        <IonList>
          <IonItem>
            <IonLabel>Pokémon Yellow</IonLabel>
          </IonItem>
          <IonItem>
            <IonLabel>Mega Man X</IonLabel>
          </IonItem>
          <IonItem>
            <IonLabel>The Legend of Zelda</IonLabel>
          </IonItem>
          <IonItem>
            <IonLabel>Pac-Man</IonLabel>
          </IonItem>
          <IonItem>
            <IonLabel>Super Mario World</IonLabel>
          </IonItem>
        </IonList>
        </div>
        <IonButton onClick={() => setShowModal(false)}>Registrarse</IonButton>
      </IonModal>
      <IonChip onClick={() => setShowModal(true)}  >
        <IonIcon icon={chevronDown}/>
        <IonLabel>Categorias</IonLabel>
      </IonChip>
    </div>
  );
};
#2

Did you try putting the page content into IonContent?

1 Like
#3

The problem is that as far as I understand I can only use one IonContent

And this is the complete code:

I already use IonContent in the Home function

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar  >
        <IonGrid>
          <IonRow id="header">
          <IonCol id="columna" size="1.5"><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
          <IonCol id="columna2" ><Busqueda /></IonCol>
            <IonCol id="columna3" size="2"><ModalExample></ModalExample></IonCol>
          </IonRow>
 
        </IonGrid>
          <IonTitle></IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense" >
          <IonToolbar>
            <IonTitle size="large"></IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer  />
      </IonContent>
    </IonPage>
  );
};

  export const ModalExample: React.FC = () => {
    const [showModal, setShowModal] = useState(false);
  
    return (
      <div>
        <IonModal isOpen={showModal} cssClass='my-custom-class' animated={true}  onDidDismiss={()=>setShowModal(false)}>
        <IonIcon icon={closeCircle} onClick={() => setShowModal(false)} id="boton-cerrar"> </IonIcon>

          <div id="contenedor-central" >
          <strong>Usuario no registrado</strong>
          </div>
          <IonButton href="/registro">Registrarse</IonButton>
        </IonModal>
        <IonChip onClick={() => setShowModal(true)} id="user" >
          <IonIcon icon={person} id="foto-usuario"/>
        </IonChip>
      </div>
    );
  };
#4

Take a look on my YouTube channel or in my GitHub repo - aaronksaunders, search for IonModal

I usually put the modal in a separate component, this way there is only one ioncontent in each component

1 Like
#5

I would recommend trying this:

In your Home component, move the <ModalExample> to the first child in <IonContent>, also keep your modal open state management in Home instead of ModalExample.

<IonContent>
  <ModalExample isOpen={shouldShow} onDidDismiss={() => setShouldShow(false)} />

Then, in ModalExample, get rid of the wrapping div and any of the elements not inside of the IonModal, which needs to be the root element. Then you should pass through isOpen and onDidDismiss to this component:

export const ModalExample = ({ isOpen, onDidDismiss }) => {
  return (
    <IonModal
      isOpen={isOpen}
      onDidDismiss={onDidDismiss}
    >

Hope that helps

1 Like
#6

@aaronksaunders I followed your example from youtube but it doesn’t open the modal. I think the downside is that the button, in this case the IonChip that opens the modal is in the header and not in the IonConten

How can i fix this? Thank you very much in advance

const Home: React.FC = () => {
  const [myModal, setMyModal] = useState({isOpen:false});

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar  >
        <IonGrid>
          <IonRow id="header">
            <IonCol id="columna" size="1.5"><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
            <IonCol id="columna2" ><Busqueda /></IonCol>
              <IonCol id="columna3" size="2"> 
              <IonChip onClick={() => setMyModal({isOpen:false})} id="user" >
                <IonIcon icon={person} id="foto-usuario"/>
              </IonChip>
            </IonCol>
          </IonRow>
 
        </IonGrid>
          <IonTitle></IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonModal  cssClass='my-custom-class' animated={true}  isOpen={myModal.isOpen} onDidDismiss={() => setMyModal({isOpen:false})}>
          <IonIcon icon={closeCircle} onClick={() => setMyModal({isOpen:false})} id="boton-cerrar"> </IonIcon>
            <div id="contenedor-central" >
            <strong>Usuario no registrado</strong>
            </div>
            <IonButton href="/registro">Registrarse</IonButton>
          </IonModal>
          <IonHeader collapse="condense" >
            <IonToolbar>
              <IonTitle size="large"></IonTitle>
            </IonToolbar>
          </IonHeader>
          <ExploreContainer  />
      </IonContent>
    </IonPage>
  );
};
#7

See full-example

  • Modal in a separate component
  • Modal with List
  • Modal That Scrolls
  • Modal That returns Value When Clicked