Getting "In Element Modal" to work - keeps showing on whole page

[narendra-agashe]

Hi, I am trying to use the In Element modal with bootstrap plugin. but somehow the modal is not getting confined to the div where I give overlayTarget attribute but instead its showing up for the whole page.

is there anything specific that I should look out for? the code i am trying to write is very simple, its just a div with a button and on click of that button i want to show the modal confined to the div where the button is.

Is this package dependent on any other package?

when i tried to run my code in the demo code taken from github, further bumped to latest angular version, it works fine and shows modal confied to demo-head component. Just that when I try to implement it in simple angular-cli project by installing angular2-modal from npm it shows modal on the whole page.

• Please tell us about your environment:

• Angular version: 4.0.0

• Browser: [Chrome 56]

Thanks, Naren

[narendra-agashe]

I had to add below section related css in my styles.css file in angular-cli project. Then everything started working

section { position: relative; padding-top: 90px; padding-bottom: 90px; } section.background-gray-lighter { background: #cdcdcd; } section.background-gray-lightest { background: #f7f7f7; border-top: solid 1px #cdcdcd; border-bottom: solid 1px #cdcdcd; } section.background-secondary { background: #9fb1bc; border-top: solid 1px #658090; border-bottom: solid 1px #658090; } .section-inverse { color: #fff; } .section-inverse h1, .section-inverse h2, .section-inverse h3, .section-inverse h4, .section-inverse h5, .section-inverse h6 { color: #fff; } .section-inverse .heading:after { background: #fff; }

Now the open question is, is the npm module missing these styles?

Thanks, Naren

[shlomiassaf]

@narendra-agashe NPM module comes without styles, as well as most plugins.

The plugins do apply some styling to support several scenarios, such as "in-element" modal but those are just patching to the base styling that you need to supply.

Why no styles in the library?

Quite simple, bootstrap comes as 1 big CSS or hand picked bootstrap modules if you have a bundler like webpack).

It does not make sense to include that with the library, if you use bootstrap you will include the CSS so you can enjoy other things like the grid, typography etc... so bundling it with the library is redundant.

Same goes for VEX plugin.

This is common for libraries that act as adapters for non-angular libraries so only the CSS is used.