Ion entry to log in using modal and stylish

Question

I have a project where I want to use this input type:

I installed the modality correctly, and I can reject it without any problems, but my problem is that it occupies the entire page, and I just want it to be the same as in the picture.

I do not know how to select the entire page in the css file that has already tried with *, but it has mixed up too much with what is inside the html file.

Thank you in advance!

Edit:

on the page that opens the modal version:

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

modality code: 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 error is probably related to html and css

Answer 1

I got it finnaly, I did not select the correct attribute.

Here's what worked:

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

Thanks to varun aaruru for helping me and everyone that he gave for good editing.

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

Answer 2

My decision:

 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 that will suggest 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 the class to a modal element when it is called and changes the style.

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

Answer 3

check this fiddle

its in ionic 1 but css is the 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

Answer 4

In order for the modal to be displayed on a partial screen, you will need to remove the ion content tag and replace it with a div. This is due to the fact that ion confusion occurs when there are two tags with ion content.

In this case, there is one in the parent and one in the child modal. So it’s best to bring him out of the baby modal. The rest of the code remains the same.