CODEWITHSUNDEEP
ember.jsember-bootstrap
Sankeerna Reddy
Sankeerna Reddy

Reputation: 199

How to add a class on Ember-bootstrap Modal?

I am using ember-bootstrap modal in which attribute "size" is "xl". xl takes my customized modal size class ".modal-xl". But I have another class ".modal-full" which adds more size to my modal-xl. How can I add this class="modal-full" on my {{#bs-modal-simple}}

.modal-xl {
    @media screen and (min-width: $modal-xl) {
        max-width: calc(#{$modal-xl} - 2rem);
    }
}
// add option to bootstrap modal for full-width option
.modal-full {
    @include media-breakpoint-up(xl) {
        max-width: calc(100% - 4rem);
    }
}

Template file:

{{#bs-modal-simple open=abc size="xl" title="Pricing Details" onHidden=(action (mut abc))}}
<table></table>
{{/bs-modal-simple}}

Anyone please help me with this. Thank you in Advance.

Upvotes: 1

Views: 509

Answers (2)

feanor07
feanor07

Reputation: 3368

I would have expected classNames to pass your own class to bs-modal. What I mean is; the following should have worked:

{{#bs-modal-simple open=abc classNames="modal-full" size="xl" title="Pricing Details" onHidden=(action (mut abc))}}

However; it does not seem to be working due to the following reason: The classNames passed to bs-modal-simple is not passed down to the actual dialog; that is bs-modal/dialog. See the template of bs-modal-simple. classNames stay on bs-modal-simple what is passed to bs-modal/dialog is in fact size.

See bs-modal/dialog's template definition; it passes sizeClass to the corresponding div element.

If you check bs-modal/dialog's source code; you will see that if a size property is passed to the component; then it will be added as class name with the following definition: modal-${size}. This means if you do pass size="xl modal-full" then you will end up having both modal-xl and modal-full within the div element underneath. So the right way seems like surprisingly passing the size attribute like this. However; if you do size="modal-full xl" for instance; it will not work.

TLDR; since size seems like the only property to pass custom class down to the div underneath you need to pass your own class like size=xl your-class-name.

Upvotes: 2

Sankeerna Reddy
Sankeerna Reddy

Reputation: 199

Oh Wow!! This is cool I guess. I just have to pass my ".modal-full in the attribute-size = "xl modal-full" 

{{#bs-modal-simple open=abc size="xl modal-full" title="Pricing Details" onHidden=(action (mut abc))}}
<table></table>
{{/bs-modal-simple}}

Please feel free to give any other suggestions.

Upvotes: 1

Related Questions