Custom Modal

I have been able to customize the modal to resize the window to certain size.
On browser (using ionic serve) it looks like:


But there are too many white spaces/blanks
I want the modal window to be of the height/width of my contents

Here is the modal page code:




Some Gyan First!


We preach sustainable weight loss - max 1


kg of weight loss a week is healthy and


tha is exactly what we would help you


acheive :slight_smile:

> <button ion-button (click)=“setGyanInput()”>Hmmm, that’s the right way


And here is the current css:
> page-guide {
> .guide-modal .modal{
> $modal-inset-min-width:0;
> $modal-inset-min-height-small:0;
> display: flex;
> height: auto;
> }
> }

Thanks in advance for pointers/help

Hello dhavalkshah i know in your variable.scss file you customize the modal-wrapper across the whole app

However havem’t had any luck customizing individual modals
Try adding to your variable.scss
ion-modal {
padding: 60px;
background: rgba(0,0,0,0.6);

Hi @Darksideous, Any further luck in customizing individual modal?


Its been long, but thought of posting it as I have kind of solved the problem
I have applied the styling using ElementRef and Renderer

You might want to have a look at this repo
It has a custom component wt which takes some co-ordinates (of where the element is to be placed) as input

Based on which the ElementRef give the handle to the element in the wt page
Whereas I use Renderer to style the element as i like. In this e.g. place it at the exact co-ordinates that are obtained

Hope this helps everybody


1 Like