ngx-modialog icon indicating copy to clipboard operation
ngx-modialog copied to clipboard

Published 20 hours ago • verified publisher icon shlomiassaf

CSS collision

Open awallat opened this issue 9 years ago • 3 comments

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.

awallat avatar Oct 14 '16 15:10 awallat

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.

sublime392 avatar Oct 16 '16 22:10 sublime392

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 {}

windmaomao avatar Nov 28 '17 14:11 windmaomao

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

sumit-mi avatar Dec 15 '17 17:12 sumit-mi