search

shlomiassaf / ngx-modialog

Modal / Dialog for Angular
http://shlomiassaf.github.io/ngx-modialog
MIT License
686 stars 242 forks source link

CSS collision #228

Open awallat opened 8 years ago

awallat commented 8 years ago

With version 2.0.1 I get a style conflict when I open a modal. This is probably because of the internal style of the component "message-modal.component.ts" with:

.form-group {
    margin-top: 10px;
}

The encapsulation is also set to "ViewEncapsulation.None" so that the style is applied to the whole application. Hence my forms are affected by this style.

I suggest to remove the encapsulation.

sublime392 commented 8 years ago

I agree. I don't know what drove the "ViewEncapsulation.None" but I do see it causing problems. If it was done to allow external style rules to be applied, the /deep/ tag takes care of that.

windmaomao commented 6 years ago

this bug is serious. Because it'll populate external stylesheet. At least, we need to get rid of 'ViewEncapsulation.None', instead using ::host

Or just using a narrower scope, ex.

   .modal-body .form-group {}
sumit-mi commented 6 years ago

Was anyone able to get rid of this conflicting css anyhow ? any workarounds ?