How to make AngularJS Materials drop down menues more visable?


Tags: javascript,html,css,angularjs

Problem :

I was playing around with AngularJS Materials and was using and . I realized that it maybe really hard to read for some people because of how light the text is and I wanted to make it visible without changing the background.

I managed to make the color of plain text of this in css:

    md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder{
  color: black;
}

I don't necessarily need to make it darker but I was wondering if there was any kind of method to make the drop down menu of AngularJS Materials more visible?



Solution :

You can change the textcolor by overriding md-menu-item. This will take some screwing around with since you'll probably need to !important certain classes to override material design.

md-menu-content.md-default-theme md-menu-item, md-menu-content md-menu-item {
    color: some color
}

They are buttons inside of a dropdown so $mdThemeProvider should work to change them if you want to go about it that way.

Just add the class md-primary, md-accent, or md-warn to one of these material elements (md-button in your case): md-button, md-checkbox, md-progress-circular, md-progress-linear, md-radio-button, md-slider, md-switch, md-tabs, md-input-container, md-toolbar

adding md-raised to a button with .md-primary inverses the color effect so .md-primary.md-raised makes the background blue and text white

  <md-menu>
    <md-button ng-class="md-raised" ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
      test menu
    </md-button>
    <md-menu-content>
      <md-menu-item>
        //
        //add md-primary on the button for blue text
        //change $mdThemeProvider if you want the color to be different
        //
        <md-button class="md-primary" ng-click="doSomething()">Do Something</md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>

https://material.angularjs.org/latest/Theming/02_declarative_syntax

EDIT: working snippet for md-menu

var app = angular.module('sandbox', ['ngMaterial']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>

<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>

<div ng-app="sandbox">
  <div layout-margin>
    <div layout="row">
      <md-menu>
        <!-- Trigger element is a md-button with an icon -->
        <md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu" class="md-raised">
          test menu
        </md-button>
        <md-menu-content>
          <md-menu-item>
            <md-button class="md-primary" ng-click="doSomething()">Do Something</md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </div>
  </div>
</div>

2nd EDIT:

OP was actually talking about the label in an md-select.

That can only be changed through css manipulation.

Now it may seem like the obvious choice to just change

md-input-container label {
   some color    
}

However, angular-materials actually puts the first md-select-value as it's label

<md-input-container class="">
   <label for="select_5" class="md-placeholder">Drop Down Tester</label>
   <md-select ng-model="selectedUser" class="ng-pristine ng-valid ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_5" aria-owns="select_container_6" aria-invalid="false" aria-label="Drop Down Tester">
       <md-select-value class="md-select-value md-select-placeholder" id="select_value_label_0">
          <span>Drop Down Tester</span>
          <span class="md-select-icon" aria-hidden="true"></span>
       </md-select-value>
    </md-select>
 </md-input-container>

If you want to change your placeholder for md-select,

md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder {
  color: green;
}

This will not change the underline or override md-primary or other stylings, just the placeholder with zero actions.

var app = angular.module('sandbox', ['ngMaterial']);
md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder {
  color: green;
}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>

<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>

<body ng-app="sandbox">
  <md-content class="md-padding">
    <md-input-container>
      <label>Drop Down Tester</label>
      <md-select ng-model="selectedUser">
        <md-option>Hello</md-option>
        <md-option>Please Change Color</md-option>
        <md-option>Pls</md-option>
        <md-option>Do it for your mother Mr.Select</md-option>
      </md-select>
    </md-input-container>
  </md-content>
</body>


    CSS Howto..

    How to specify BOTH max-width % and px [closed]

    How to make my delete buttons responsive and stay absolute on my thumbnails

    How can i unify 2 images with drag and drop?

    Jquery Ui Sortable showing broken image in IE8

    How to fix Conflicting responsive menu Css and Colorbox css?

    How to animate a div to move from end to end infinitely

    How to achieve following graphics via css

    How to create new div immediately next to image like on Facebook's news feed on right side of page?

    How to localize the CSS just for this table's use?

    How to set borders between children from parent in CSS?

    how to resize images inside a div inside another div with css?

    How to create css shadow effect [duplicate]

    How to add text to a CSS Sprite

    How can I fix this parralax

    How to make the background of my text larger?

    How to start with responsive deisgn [closed]

    How to get maximum compatibility with most of the devices for a Mobile Website?

    How to use CSS with Django forms?

    How to change Fancybox preloader image?

    CSS+HTML: How to draw table/cell border

    How can I make this a horizontal list?

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    How to style 404 page in WAMP server

    How to center jqPagination widget?

    How to align a Wordpress navigation bar to the right of a logo?

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    How to specify a CSS border on hover around thumbnails?

    How to apply a drop shadow on a triangle in CSS?

    How to fix “Blocked loading mixed active content” for css and js over https

    How to create dynamic table 4 columns per row using GridView?