Modal Auto Adjust Height to Fit Content

@mhtchong wrote:

Hi everyone,

I have change the default design of the modal so that it won’t occupy the whole screen.

I have a lot of issues with it:

1. How do I make it adjust its height and width automatically when displayed in different devices?
2. How do I make the height adjust according to its content.

This is my HTML code:

<ion-content class="content-modal">

	<div class="inset-modal">

		<ion-toolbar color="custom">

	        <ion-title>
	            Transfer Funds
	        </ion-title>

	        <ion-buttons end>
			    <button ion-button icon-only>
			        <ion-icon name="close"></ion-icon>
			    </button>
		    </ion-buttons>

	    </ion-toolbar>

	    <div padding>

		    <form [formGroup]="transferFundsForm">

		    	<ion-list radio-group formControlName="transfer_to" class="radio-group">
			  		<ion-label stacked>Transfer To</ion-label>
				    <ion-item class="radio-style1">
				    	<ion-label>Savings</ion-label>
				    	<ion-radio value="savings"></ion-radio>
				    </ion-item>

				    <ion-item class="radio-style2">
				    	<ion-label>Another Wallet</ion-label>
				    	<ion-radio value="wallet"></ion-radio>
				    </ion-item>
				</ion-list>

				<ion-item class="input-style">
					<ion-label stacked>Amount</ion-label>
				    <ion-input type="number" name="amount" formControlName="amount"></ion-input>
			  	</ion-item>

			  	<div class="error-msg" *ngIf="transferFundsForm.get('amount').hasError('required') && transferFundsForm.get('amount').touched">Amount is required!</div>
		  		<div class="error-msg" *ngIf="transferFundsForm.get('amount').hasError('min') && transferFundsForm.get('amount').touched">Amount must be greater than 0!</div>

			</form>

		</div>

	</div>

</ion-content>

SCSS:

.content-modal{
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.inset-modal {
  background-color: #fff;
  position: absolute;
  width: 350px;
  height: 450px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Thank you!

Posts: 1

Participants: 1

Read full topic