Ionic Slide React Content Is All On One Line

Question

I am trying to create a view with multiple slides. However, the components on the same slide render on just one line as opposed to the title above the button. Could someone help me fix this? My slides code is:

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <IonContent>
      <IonSlides pager={true} options={slideOpts}>
        <IonSlide>
          <IonTitle size="large"> Slide 1 Title</IonTitle>
          <IonButton color="primary">Get Started</IonButton>
        </IonSlide>
        <IonSlide>
            <h1>Slide 2</h1>
        </IonSlide>
        <IonSlide>
            <h1>Slide 3</h1>
        </IonSlide>
      </IonSlides>
    </IonContent>
  );
};

The display I'm getting is:

@AaronSaunders could you explain why the components render in 1 line as opposed to below eachother? — DMop, May 18 '20 at 22:43
what components are you talking about? I think you need to take a second look at the code and also be specific about what you are expecting to see — Aaron Saunders, May 18 '20 at 23:29
@AaronSaunders the title and the button render on the same line as opposed to the title being on one line and then the button under it. Is that the default behavior? — DMop, May 18 '20 at 23:30

score 0 · Answer 1 · answered May 19 '20 at 00:06

0

<IonSlide>
   <IonToolbar>
      <IonTitle size="large"> Slide 1 Title</IonTitle>
   </IonToolbar>
   <IonButton color="primary">Get Started</IonButton>
</IonSlide>

answered May 19 '20 at 00:06

Aaron Saunders

33,180
5
60
80

That still renders the title and button on one line. It looks like the slide itself doesn't expand to fill the entire IonContent container. Is there a way I can make sure it automatically does this? – DMop May 19 '20 at 14:52
1

wrap it in a
– Aaron Saunders May 20 '20 at 04:23

score 0 · Accepted Answer · answered May 21 '20 at 14:37

0

The ion components must be wrapped in a <div>

The correct slide syntax should read:

   <IonSlide>
      <div><IonTitle size="large"> Slide 1 Title</IonTitle></div>
      <IonButton color="primary">Get Started</IonButton>
    </IonSlide>

answered May 21 '20 at 14:37

DMop

463
8
23

Ionic Slide React Content Is All On One Line

2 Answers2