Centering a section with another on bottom

Ionic Framework
1

I have this scenario…

asdasd
asdasd.png842×565 24.5 KB

The left one is what i got, the signup on the bottom and the login and the buttons on the middle of all the remaining space, and i want is like the right one, the login and the buttons on the middle of all the content. How i can achieve that?

This is my code

<ion-content primary padding>


  <ion-grid class="login-grid">
    <ion-row align-items-center text-center>
      <ion-col size="12">
        <ion-item>
          <ion-input placeholder="Email"></ion-input>
        </ion-item>
        <ion-item>
          <ion-input placeholder="Password"></ion-input>
        </ion-item>

        <ion-button expand="full" size="large">JOIN</ion-button>

        <div class="sign-in-hr">
          <span>Or log in with</span>
        </div>

        <!-- <hr class="hr-text" data-content="Or join with"> -->
        <ion-row>
          <ion-col class="fb-col" size="6">
            <ion-button class="rs-btn fb" size="default">
              <ion-icon slot="icon-only" name="logo-facebook"></ion-icon> 
              Facebook
            </ion-button>
          </ion-col>
          <ion-col size="6">
            <ion-button class="rs-btn g" size="default">
              <ion-icon slot="icon-only" name="logo-google"></ion-icon> 
              Google
            </ion-button>
          </ion-col>
        </ion-row>


      </ion-col>
      <ion-col size="12" align-self-end>
          <div class="sign-in-hr">
            <span>Not registered?</span>
          </div>

          <ion-button expand="full" size="default">Sign up</ion-button>
        </ion-col>
    </ion-row>
  </ion-grid>
  
</ion-content>

And this is my scss

.login-grid {
    height: 100%;

    ion-row {
        height: 100%;
    }
}

.sign-in-hr {
    width: 100%; 
    height: 10px; 
    border-bottom: 1px solid rgb(177, 167, 167); 
    text-align: center; 
    margin-top: 10px; 
    margin-bottom: 10px;

    span {
        font-size: 18px; 
        color: rgb(177, 167, 167); 
        background-color: #ffffff; 
        padding: 0 10px;
    }
}

.fb-col {
    padding-left: 0px !important;
}

.rs-btn {
    width: 100%;
    --border-radius: 0px;
    text-transform: none;

    &.fb {
        --background: #3b5998;
    }
    
    &.g {
        --background: #d62d20;
    }
}
2

hey @vzDeadler have you tried setting up padding and margins for the column that you want to set in middle??

set the signup col scss as bottom:0!important;

it makes the column to the bottom of screen and try setting position,margin top, bottom for the 1st column too …

3 
    <ion-button expand="full" size="large">JOIN</ion-button>

    <div class="sign-in-hr">
      <span>Or log in with</span>
    </div>

    <!-- <hr class="hr-text" data-content="Or join with"> -->
    <ion-row>
      <ion-col class="fb-col" size="6">
        <ion-button class="rs-btn fb" size="default">
          <ion-icon slot="icon-only" name="logo-facebook"></ion-icon> 
          Facebook
        </ion-button>
      </ion-col>
      <ion-col size="6">
        <ion-button class="rs-btn g" size="default">
          <ion-icon slot="icon-only" name="logo-google"></ion-icon> 
          Google
        </ion-button>
      </ion-col>
    </ion-row>


  </ion-col>
  <ion-col size="12" align-self-end class="signup-col">
      <div class="sign-in-hr">
        <span>Not registered?</span>
      </div>

      <ion-button expand="full" size="default">Sign up</ion-button>
    </ion-col>
</ion-row>

scss

.signup-col{
position:0!important;
}
.login-col{
margin-top:;
margin-bottom:;
}

use !important cause there will be default margin and padding for rows and columns

hope it helps

4

What about using ion-footer to position that button

1 Like