CODEWITHSUNDEEP
javascripthtmlcssangularjstwitter-bootstrap
acostela
acostela

Reputation: 2727

Angular directive not aplying style

I have a question about styles with angularJs directives. I have imported a bootstrap directive for progressbars inside my project. I'm using it inside a div class that I created.

<div class="diagnostics-widget-modal">
    <div class="modal-header">
        <h3>SOME CONTENT</h3>
   </div>
   <div class="modal-body">
       <div class=left-workflow-area>
           <uib-progressbar value="55"></uib-progressbar>
       </div>
   </div>
</div>

When I run my page the directive html is rendered correctly and that piece of code becomes the following.

<div class="modal-body">
    <div class="left-workflow-area">
         <div class="progressbar ng-isolate-scope" value="55">
              <div class="progress">
                   <div class="progress-bar" ng-class="type &amp;&amp; 'progress-bar-' + type" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (percent < 100 ? percent: 100) + '%'}" aria-valuetext="%" aria-labelledby="" ng-transclude="" style="width: 100%;">    </div>
              </div>
         </div>
    </div>
</div>

What I want is to style the "progress" and "progress-bar" classes. I have a scss defining left-workflow-area.

 .diagnostics-widget-modal {
     height: 100%;
     width: 100%;

    .modal-header {
        height: 71px;
        padding: 0 12px 0px 36px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

       .modal-close {
          width: 72px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    }

   .modal-body {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     height: 90%;

    .left-workflow-area {
        display: flex;
        width: 70%;
        height: 100%;
     }

    .right-workflow-area {
       display: flex;
       width: 30%;
       height: 100%;
     }
 }

I have a style file for the directive that is not being applied.

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba (0,0,0,.1);
}

If I declare that class inside the "left-workflow-area" is being applied correctly. But I want to keep this style appart because this is a directive that will be used in different parts in my app. How can I do this?

Upvotes: 0

Views: 903

Answers (2)

acostela
acostela

Reputation: 2727

Finally I solved it. It was a silly error. I have a big file where I import all my styles inside my project and I completely forgot to include my new component in it.

styles.scss

@import 'molecules/header';
@import '../components/dropdown/dropdown';
@import '../components/progressbar/progressbar';
@import '../components/keyboard/keyboard';

Upvotes: 0

jibe
jibe

Reputation: 576

It works when .progress is in .left-workflow-area because it is generated as .left-workflow-area .progress which have an higher score than default  .progress provided by bootstrap css.

If it does not work when .progress is outside, it looks like the default .progress override it. It may be caused by bootstrap's css inclusion after your own css in html page or in your compile process. When css rule have the same score, the last read by the browser is applied.

So putting vendor's styles before yours should solve your problem.

another note : in .progress, a semi colon is missing in the background-color's rule.

Upvotes: 1

Related Questions