search

amitmahida92 / ng4-loading-spinner

Angular 4 custom async loading spinner.
MIT License
69 stars 31 forks source link

css class hidden interferes with bootstrap css #31

Closed Sprungwunder closed 6 years ago

Sprungwunder commented 6 years ago

I am using your spinner in an angular app that also already contains a bootstrap css. Unfortunately bootstrap adds an !important flag to its .hidden class like .hidden { display: none !important; } and this destroys the smooth transition effect when changing visibility state. Maybe changing the css class names avoids this conflict, or there is another solution? I am new to angular development, so maybe I am missing something to solve this on my own.

Sprungwunder commented 6 years ago

solved this by adding a custom style in my app component template 

    <style>
      #myspinner /deep/ .hidden { 
        display: block !important;
      }
    </style>
    <ng4-loading-spinner id="myspinner"> </ng4-loading-spinner>