css3 - AngularJS ng-class cannot override Bootstrap dropdown CSS rules -



css3 - AngularJS ng-class cannot override Bootstrap dropdown CSS rules -

using angularjs-1.2.26 directive ng-class, attempting override bootstrap 3.2 css rules dropdown-menu & dropdown-header, new font-size, padding, margin not effecting html display.

i using ajs1.2.26 ng-class override (bs3 base of operations classes) navbar-brand, navbar-nav among others using ajs techniques such follows:

<a data-ng-class="settings.navbarbranddensity" class="navbar-brand" ui-sref="home">app</a> <ul data-ng-class="settings.navbarnavdensity" class="nav navbar-nav"> <span data-ng-class="{invisible: settings.displaydensity != 'comfortable'}"> class="fa fa-check fa-fw" </span>&nbsp;&nbsp;comfortable</a>

i have plunker shows navbar working, dropdown not working:

http://plnkr.co/edit/tkq3mqdsak3atxjgsiru

in plunker above click on gear icon (e.g., setting) switch between comfortable cozy, compact , navbar change, associated dropdown not.

the variables displaydensity, navbarbranddensity, navbarnavdensity initialized in .run of maincontroller, , in .controller setup $watches. basic thought implament gmail comfortable, cozy, compact feature.

.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; });

below in dropdown-menu-cozy default values bs3, , in dropdown-menu-comfortable new rules want apply when user clicks on 'comfortable'

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; */ }

here screenshot chrome development tools shows when eliminate (i.e., un-check) values font-size, padding, margin end with, things ok. (the un-check causes dropdown inherit rules i've sucessfully changed in navbar parent) using pestiside css debug library line/boxes around elements in picture.

css sort of drive me nuts! i'am programmer baby! if can through little plunker , see improve approach appreciated.

maybe there limitations ng-class not aware of or fixes in later varsions of ajs (have not tried 1.3.x because of ie project limitations)

i can produce finish github using yeoman, grunt, bower if interested in comfortable, cozy, compact manipulation of bs3.

if there existing css files (projects) out there compact or expand bs3 padding, margins interested!

simple nasty error :

you forgot dot in css indicating classes

simply replace

dropdown-menu-... { ... }

with

.dropdown-menu-... { ... }

angularjs css3 twitter-bootstrap-3 angular-ui-bootstrap ng-class

Comments

Post a Comment

Popular posts from this blog

assembly - What is the addressing mode for ld, add, and rjmp instructions? -

assembly - What is the addressing mode for ld, add, and rjmp instructions? - hey guys know ldi (load immediate) addressing mode set immediate , st instruction addressing mode set index. however, have no thought others curious are! thanks :) the addressing modes explained in instruction set, in first few pages. in table of instructions see operands instruction determine addressing mode. mode indicated arguments assembly instruction. for example, ld had several different ways of operating, depending on arguments. 1 of them ld rd,x d number of register, such ld r3,x . ld r3,-z else (although both indirect addressing). rjmp k relative addressing, jumping pc + k + 1. add rr,rd direct register addressing. result contained in rd. assembly avr instructions
Read more

vowpalwabbit - Interpreting Vowpal Wabbit results: Why are some lines appended by "h"? -

vowpalwabbit - Interpreting Vowpal Wabbit results: Why are some lines appended by "h"? - below part of log training vw model. why of these lines followed h? you'll notice that's true of "average loss" line in summary @ end. i'm not sure means, or if should care. ... average since illustration illustration current current current loss lastly counter weight label predict features 1.000000 1.000000 1 1.0 -1.0000 0.0000 15 0.500000 0.000000 2 2.0 1.0000 1.0000 15 1.250000 2.000000 4 4.0 -1.0000 1.0000 9 1.167489 1.084979 8 8.0 -1.0000 1.0000 29 1.291439 1.415389 16 16.0 1.0000 1.0000 45 1.096302 0.901166 32 32.0 -1.0000 -1.0000 21 1.299807 1.503312 64 64.0 -1.0000 1.0000 ...
Read more

Is there a way to convert an HTML page styled with Bootstrap CSS into email-compatible html? -

Is there a way to convert an HTML page styled with Bootstrap CSS into email-compatible html? - is there way convert html page styled bootstrap css html email compatible form? see there exclusively different css frameworks, ink, creating email compatible html, there flow creating email doesn't require utilize of different css framework? there html -> pdf -> email html flow? or other flow? no, couple of reasons... first, there no reliable css or html email. clients on place in terms of css back upwards & how render html, structural/semantic problem. isn't converting classes much altering html structure. as explained in this css tricks post, typical solution ol-skool techniques table-based layouts, requiring exclusively restructure existing html. have add together client-specific hacks. second, , more importantly, shouldn't send everything on existing page email. if it's newsletter subscribers, people won't read it. instead, create ...
Read more