Ionic 2 login popup using Modal and styling

Question

I have a projet where i want to use this type of login :

I have set up a modal correctly and i can dismiss it with no problem, but my problem is that it take th

Answer 1

I got it finnaly, i was not selecting the right attribute.

Here what worked :

page-login {
    .sample-modal-page {
        padding: 30px;
        background: rgba(0,0,0,0.5);
    }
}

Thank you to varun aaruru for helping me and all the caracteristic he gave for nice editing

here you can also find a nice post talking about how to nicely design it : https://forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/19

Answer 2

My solution to this:

import { Renderer } from '@angular/core';
import { ModalController, NavParams, ViewController } from 'ionic-angular';

@Component(...)
class HomePage {

  constructor(
    public modalCtrl: ModalController
  ) { }

  presentProfileModal() {
    let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
    profileModal.present();
  }

}

@Component(...)
class Profile {

  constructor(
    params: NavParams,
    public renderer: Renderer,
    public viewCtrl: ViewController
  ) {
    this.renderer.setElementClass(viewCtrl.pageRef().nativeElement, 'my-popup', true);
    console.log('UserId', params.get('userId'));
  }

}

Add this to your scss:

ion-modal.my-popup {
  @media (min-width: 300px) and (min-height: 500px) {
    ion-backdrop {
      visibility: visible;
    }
  }

  .modal-wrapper {
    position: absolute;
    overflow: hidden;
    max-width: 280px;
    border-radius: 2px;
    width: 80vw;
    height: 50vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
    box-shadow: 0 16px 20px rgba(0,0,0,.4);
    background-color: #fafafa;
  }
}

Or this css, which will propose dynamic height:

ion-modal.my-popup {
  @media (min-height: 500px) {
    ion-backdrop {
      visibility: visible;
    }
  }

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-overlay;

  display: flex;

  align-items: center;
  justify-content: center;

  contain: strict;
  .modal-wrapper {
    &,
    .ion-page,
    .ion-page .content,
    .ion-page .content .scroll-content {
      contain: content;
      position: relative;
      top: auto;
      left: auto;
    }

    z-index: $z-index-overlay-wrapper;
    display: flex;
    overflow: hidden;

    flex-direction: column;

    min-width: $alert-min-width;
    max-height: $alert-max-height;

    opacity: 0;

    height: auto;
    max-width: $alert-md-max-width;
    border-radius: $alert-md-border-radius;
    background-color: $alert-md-background-color;
    box-shadow: $alert-md-box-shadow;

    .ion-page .content {
      background-color: color($colors, light);
    }
  }
}

I just set a class to modal element when it is called and change the style.

• The modal implementation source is based in the official API ModalController

Answer 3

For Modal to show up in partial screen, you'll have to remove the ion-content tag and replace with a div. This is because ionic gets confused when there are two ion-content tags.

In this case there is one in the parent and one in the child modal. So its best to take it out of the child modal. Rest of the code remains same.

Answer 4

check this fiddle

its in ionic1 but css is same

style="background: rgba(0,0,0,0.5);
position: absolute;
top: 80px;
left: 45px;
display: block;
width: 70%;
height: 62%;"

change values as needed