Ionic react ui

Hello and Happy new year Ionic community,

I am fairly new to the subject but I have taken a liking to learning Ionic react. I am struggling to get a couple of buttons that are in a Ionrow to the bottom of the screen. I’d much appreciate any help.

Thank you Kindly,

You can wrap the buttons like:

  <IonToolbar> buttons

More about ion-footer

1 Like

Thanks, mate. Appreciate it. This might come off as an unusual request. But I was wondering if I could have a chat with you about how CSS works in Ionic react? I am an android dev. I have been for past 10 years. But I am struggling to put UIs together on Ionic react. especially setting up components where I want on the screen. Guess I am use to drag and drop a lot :stuck_out_tongue:

There’s nothing special about how CSS works in Ionic React; CSS should work the same way it does in a web browser.

That said, you can do most layouts using the built-in Ionic components, especially IonGrid and IonHeader/IonContent/IonFooter.

Also note that many Ionic components have a slot attribute that you can set to start or end to align them.

1 Like
import { IonAlert, IonButton, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonList, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';

import './LoginStyles.css';
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

const Login: React.FC = () => {

  return (
      <IonHeader collapse="condense">
      <IonContent fullscreen className="ion-padding ion-text-center">


            <IonLabel position="stacked" color="primary">Username</IonLabel>
            <IonInput name="username" type="text" spellCheck={false} autocapitalize="off">

            <IonLabel position="stacked" color="primary">Password</IonLabel>
            <IonInput name="password" type="password" >


            <IonButton type="submit">Login</IonButton>



This is what I am working with. I need to get here. I have worked out how the colors borders work except for alignment of components. 

How do I get to here? 

I appreciate your help mate. thanks

You probably don’t need a grid for this kind of layout, but if you are going to use a grid, you need to make sure that everything in <IonGrid> is in <IonRow> which is in <IonCol>. In your code, you have <IonItem> as a child of <IonGrid>, but that won’t work; start from the examples in the docs and make sure you structure your code the same way.

For a basic login form, a normal structure is something like:

  <IonLabel position="stacked">Email</IonLabel>
  <IonInput type="email" value={value} inputmode="email" />
  <IonLabel position="stacked">Password</IonLabel>
  <IonInput type="password" value={value} />
<IonButton type="submit" expand="block">Log in</IonButton>