title: AngularJS ng-class cannot override Bootstrap dropdown CSS rules
body: <p>Using AngularJS-1.2.26 directive ng-class, am attempting to override Bootstrap 3.2 CSS rules for dropdown-menu &amp; dropdown-header, but my new font-size, padding, margin are not effecting html display.</p>
  
  <p>I am using AJS1.2.26 ng-class successfully to override (BS3 base classes) navbar-brand, navbar-nav among others using AJS techniques such as follows:</p>
  
  <pre><code>&lt;a data-ng-class="settings.navbarBrandDensity" class="navbar-brand" ui-sref="home"&gt;App&lt;/a&gt;
  &lt;ul data-ng-class="settings.navbarNavDensity" class="nav navbar-nav"&gt;
  &lt;span data-ng-class="{invisible: settings.displayDensity != 'comfortable'}"&gt; class="fa fa-check fa-fw" &lt;/span&gt;&amp;nbsp;&amp;nbsp;Comfortable&lt;/a&gt;
  </code></pre>
  
  <p>I have a Plunker that shows navbar working, but dropdown not working:</p>
  
  <p><a href="http://plnkr.co/edit/TKq3MQdSaK3aTXJgSirU" rel="nofollow noreferrer">http://plnkr.co/edit/TKq3MQdSaK3aTXJgSirU</a></p>
  
  <p>In the Plunker above click on the Gear Icon (e.g., setting) to switch between Comfortable Cozy, Compact and navbar will change, but associated dropdown will not.</p>
  
  <p>The variables displayDensity, navbarBrandDensity, navbarNavDensity are initialized in .run of MainController, and in .controller I setup $watches. The basic idea is to implament something like the GMail Comfortable, Cozy, Compact feature.</p>
  
  <pre><code>.run ...
  $rootScope.settings = {
    displayDensity: 'cozy',
    navbarDensity: 'navbar-cozy',
    navbarNavDensity: 'navbar-nav-cozy',
    navbarBrandDensity: 'navbar-brand-cozy',
    navbarToggleDensity: 'navbar-toggle-cozy',
    faIconDensity: '',
    dropdownMenuDensity: 'dropdown-menu-cozy',
    dropdownHeaderDensity: 'dropdown-header-cozy'
  };
  
  .controller ...
  $scope.$watch('settings.displayDensity', function() {
    $scope.settings.navbarDensity = 'navbar-' + $scope.settings.displayDensity;
    $scope.settings.navbarNavDensity = 'navbar-nav-' + $scope.settings.displayDensity;
    $scope.settings.navbarBrandDensity = 'navbar-brand-' + $scope.settings.displayDensity;
    $scope.settings.navbarToggleDensity = 'navbar-toggle-' + $scope.settings.displayDensity;
    $scope.settings.faIconDensity = 'fa-icon-' + $scope.settings.displayDensity;
    $scope.settings.dropdownMenuDensity = 'dropdown-menu-' + $scope.settings.displayDensity;
    $scope.settings.dropdownHeaderDensity = 'dropdown-header-' + $scope.settings.displayDensity;
  });
  </code></pre>
  
  <p>Below in dropdown-menu-cozy are the default values from BS3, and in dropdown-menu-comfortable are new rules I want to apply when user clicks on 'Comfortable'</p>
  
  <pre><code>dropdown-menu-cozy {
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
  }
  
  dropdown-menu-comfortable {
    padding: 10px 0 !important;
    margin: 4px 0 0 !important;
    font-size: 18px !important;
    /* font-size: inherit !important; */
  }
  </code></pre>
  
  <p>Here is a screenshot from Chrome development tools that shows when I eliminate (i.e., un-check) the values for font-size, padding, margin which I end up with, then things look ok. (the un-check causes dropdown to inherit rules I've sucessfully changed in navbar parent) I am using pestiside CSS debug library to get those line/boxes around elements in picture.</p>
  
  <p><img src="https://i.stack.imgur.com/kLtzW.png" alt="Chrome tools allows eliminating the offending rules">
  CSS sort of drive me nuts! I'am a programmer baby! If anyone can look through the small Plunker and see some better approach it would be appreciated.</p>
  
  <p>Maybe there are limitations to ng-class I am not aware of or fixes in later varsions of AJS (have not tried 1.3.x because of IE project limitations)</p>
  
  <p>I can produce a complete GitHub using Yeoman, Grunt, Bower if someone is interested in this Comfortable, Cozy, Compact manipulation of BS3.</p>
  
  <p>If there are already existing CSS files (projects) out there that Compact or Expand BS3 padding, margins I would certainly be interested!</p>