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 the entire page, and i just want it to be as in the picture.

I don't know how to select all page in css file, already tried with * but it messing too much with what is inside the html file.

thank you in advance !

Edit :

code on the page that open the modal :

  showLogin() {
let modal = this.modalCtrl.create(LoginPage);
// this.navCtrl.push(modal);
modal.present();
}

code of the modal : HTML :

<ion-navbar class="modal-wrapper" *navbar>
  <ion-title>Sample Modal</ion-title>
</ion-navbar>
<ion-content padding class="sample-modal-page">
  <p>my sample modal page<p>
     <ion-buttons start>
        <button (click)="dismiss()">
          Cancel
        </button>
      </ion-buttons>
</ion-content>

CSS :

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

TS :

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {}

  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }

}

My mistake is probably between html and css

Answer 1

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 2

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