Ionic-framework: ionic2 - enhancement(modal) - add cssClass property to modal options

[zakton5]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request

Current behavior:
Currently, you cannot pass in a cssClass name into the modalOptions object as you can do on alerts, popovers, etc.

Expected behavior:
I would like to be able to pass in a cssClass into modalOptions.

[mhartington]

I'm assuming you want to do custom style if you present a page as a modal?

[wbhob]

Just put it in your modal sass file.

[zakton5]

@mhartington Yes, essentially
@wbhob I want to style the modal container, so putting in the modal's sass file won't have any effect.

[mhartington]

I don't think we'd add this for 2.0 final, but you could get something by just targeting the component in scss.

so my-modal-page.scss

.modal-wrapper my-modal-page{
  // custom styles that will only be applied to my modal page component
}

[zakton5]

@mhartington That will not work, because what I really want to achieve here is styling the .modal-wrapper itself, not the page contents. Basically, based on the modal, I want to make it larger, smaller, or full screen. Currently there is no way to do that for modals, unlike popovers, etc.

Also, why would you close this? Just because it can't be done in time for 2.0 final doesn't mean it should not be done eventually...

[wbhob]

Mike gave you a solution. That DOES resize your actual modal, not the content. It doesn't need to be in 2.0 final because the solution is right there. Please try it before saying it doesn't work.

[zakton5]

I had already tried it before even posting this issue. It doesn't work as desired. The following is Ionic's CSS for the modal-wrapper, which is what I want to change, but only for one specific modal.

.modal-wrapper {
    position: absolute;
    top: calc(50% - (600px/2));
    left: calc(50% - (600px/2));
    width: 600px;
    height: 600px;
}

Doing something like Mike suggested, such as below, does not resize the wrapper but only the page content itself, which in turn is not even positioned correctly due to the above css that modal-wrapper already has.

.modal-wrapper my-modal-page {
    width: 768px;
    height: 1024px;
}

What would really be desirable is to apply a class just as one would do for a Popover, which I have just tested again and does work.

.modal-wrapper.full-screen-modal {
    position: relative;
    width: 100%;
    height:100%;
}

[mhartington]

Will keep this open for now.
We're in a bit of a feature lock for now in order to fix up any remaining issue for 2.0 final.

We'll revisit post 2.0.

[zakton5]

no problem at all! thanks for reopening. best of luck on the 2.0 final release.

[rajeevriitm]

Any updates on this? I would like to have different size for different modals in my app.

[szerner]

I second that feature request. In a Popover component we can apply custom styling via the cssClass option property. Unfortunately, popovers cannot have a fixed header as documented in this still open issue. But if we switch to modals (with correct header fixing) we lose the ability to style them individually.

So for my purposes I would need a individually stylable modal or a popover with the header fixed as intended.

[sachithd]

This is exactly what I'm looking for. I'm working on a pwa and need different sized modal windows in my application. Also it would be nice to have options if we can make the modal window re-sizeable and also draggable (eg: example)

[brandyscarney]

Thanks for the issue! I submitted a PR for this here: https://github.com/driftyco/ionic/issues/11103

I've released a nightly based off of our 3.x version (see the changelog to upgrade). You can install this nightly by running the following:

npm install --save --save-exact [email protected]

Please let me know if you see any issues with this implementation, thanks!

[sachithd]

Update 07/04/2017
I can get the expected behaviour by changing my css to
.settings-modal div.modal-wrapper {

}

Hi

Thanks. But looks like it breaks when you resize the browser window.
(Height)

This is my css

.settings-modal {
position: absolute;
width: 30%;
height: 60%;
top: 20%;
left: 35%;

@media (max-width: 480px) {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
}

And below is what I have in my controller.

let settingsModal = this.modalCtrl.create(SettingsPage, { data: [this.data] },
{
cssClass: 'settings-modal'
});

settingsModal.present();

When the browser window is smaller it applies the css styles to the
modal correctly.

But when you increase the height of the browser window it breaks at
one point and the modal header , footer start to disappear and the
modal content go all over as well.

Please advise.

Thanks

PS

I've been using the following code prior to your email and it gives me
the correct results. (even when the window size is changed)

in the modal constructor

this.renderer.setElementClass(viewCtrl.pageRef().nativeElement,
'settings-popup', true);

CSS

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

.modal-wrapper {
position: absolute;
width: 30%;
height: 60%;
top: 20%;
left: 35%;
}

@media (max-width: 480px) {
.modal-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
}
}

On Thu, Apr 6, 2017 at 11:39 PM, Brandy Carney [e-mail]
wrote:

Thanks for the issue! I submitted a PR for this here: #11103
https://github.com/driftyco/ionic/pull/11103

I've released a nightly based off of our 3.x version (see the changelog
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#300-2017-04-05
to upgrade). You can install this nightly by running the following:

npm install --save --save-exact [email protected]

Please let me know if you see any issues with this implementation, thanks!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/10020#issuecomment-292346163,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABb0T3uY3JC8udEvTC_jODuVHp1OuuGDks5rtWm8gaJpZM4LjHvY
.

[zjx]

thanks, cssClass works fine!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.