0

I have three components are inside an IonSlides. I would like to fix "Registration" button of a component in bottonm of that IonSlides. how should I do?

Register.tsx:

<IonContent>
   <IonSlides>
      <IonSlide>
          <Search/>
      </IonSlide>             
      <IonSlide>
          <.../>
      </IonSlide>
      <IonSlide>
          <.../>
     </IonSlide>
  </IonSlides>
</IonContent>

Search.tsx:

...
return (        
<div>
     <div>  
          <StyledBody>
             ...
          </StyledBody>
        </div>
        <div
            css={css`
                position:sticky;
                bottom:0;
                overflow:inherit;
                `}>
            <StyledButton>
                Registration
            </StyledButton>
       </div>
</div>  
);
Shokouh Dareshiri
  • 826
  • 1
  • 12
  • 24

1 Answers1

1

Try adding this css to the div containing your button:

display: flex;
align-items: flex-end;
seddouguim
  • 504
  • 3
  • 12
  • thank you.. but it has not worked.. the button has not fixed in bottom of its parent (IonSlides or IonContent) – Shokouh Dareshiri Jul 14 '21 at 05:39
  • I don’t know if there’s such a think as a css prop. Try replacing the whole styling code you’ve put on the div with this instead: style={{display: flex, align-items: flex-end }} – seddouguim Jul 14 '21 at 19:45
  • Actually the component you need to style is the ionslide container that has the search component. Try putting the css code on that element instead. – seddouguim Jul 14 '21 at 19:50