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>
);
};
Did you try putting the page content into IonContent?
1 Like
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>
);
};
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
max
November 7, 2020, 8:21pm
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
@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>
);
};