I want to customize the md-chip color randomly without using css style. Is there any attribute in the md-chip directive?
<md-chips placeholder="Add more tags here"
secondary-placeholder="Enter tags here" ng-model="contact.contact.tags.attrVal" md-on-add="contact.createTag(contact.contact)" md-on-remove="contact.removeTag(contact.contact)"></md-chips>
you can use ng-style. i.e
ng-style={background-color:'red'}
See Issue 8692 on Angular Material's github. It appears to be a known issue that is being worked on currently.
Related
I'm using Angular-UI's latest Datepicker control, inline, and I can't figure out how to make it bigger so it takes up the entire page (or its container).
Has anyone attempted/achieved this desired result?
Datepicker control: https://github.com/angular-ui/bootstrap/tree/master/src/datepicker from http://angular-ui.github.io/bootstrap/
I tried:
manually setting width on control,
played with different parent containers
was hopeful but no luck on this: How do you change the size of a size of an angular ui bootstrap date picker popup?
even though its Jquery related, tried How to resize the jQuery DatePicker control
changing container/element font-size appears to make no difference
Code:
<div style="display:inline-block; min-height:290px!important; min-width:800px!important;">
<div uib-datepicker ng-model="dt" class="col-12" datepicker-options="options"></div>
</div>
Any information is appreciated.
I am trying to use a md-datepicker, and at the moment in which the datapicker is selected the rest of the screen goes blank seeing only the datepicker.
The code is the following:
<md-input-container flex="50">
<label>Fecha nacimiento</label>
<md-datepicker required ng-model="paciente.fecha" md-current-view="year" md-hide-icons="calendar""></md-datepicker>
</md-input-container>
And it looks like this.
I found the solution, it was a problem with Angular Material CSS. I had version 1.1.0, updating to version 1.1.8 the error is solved.
I'm trying to do a toggleClass onClick in AngularJs 1.5. Is there any possibility to do that? For example, if you click on a div it'll change a background color.
You can use ng-class which is made for this very purpose.
ng-class is used like <div ng-class={'class_you_want_to_apply': some_boolean_variable}></div>
If you want to add more classes you can do so by added commas after each 'some_boolean_variable'
More docs at:
https://docs.angularjs.org/api/ng/directive/ngClass
I'm trying to use Angular Material color intention classes like md-primary on normal HTML elements as below:
<span class="md-primary">This text is in primary color.</span>
But this is not working. I assume that it is because during rendering, Angular applies color intention classes only to the ngMaterial directives.
Am I correct in this explanation? And if so, is there a workaround for this, apart from creating my own CSS classes?
The class color only will work on the Material elements, but there's a work around:
Just pick the color hex from the Google Material Site http://www.google.com/design/spec/style/color.html#color-color-palette
Sample:
<span style="color: #2196F3"> Material Blue Color</span>
There are CSS/LESS palettes around, if you don't want to pick all these colors. http://zavoloklom.github.io/material-design-color-palette/
I am new to Bootstrap and Angular. In my webpage there is a button and i am providing a popover for a span like this
<span popover="Download Project History" popover-trigger="mouseenter" tooltip-placement="top" style="padding: 5px" translate="DOWNLOAD">DOWNLOAD</span>
But its getting hidden under navbar.
Based on my googling i found to provide data-container="body" in the html element. But its not working too.
Can anyone please help me?
Thanks
I had a similar problem where the popover was hidden behind overflow content and adding the following attribute fixed it:
popover-append-to-body="true"
tooltip-append-to-body="true"
attaches the tooltip to the body and makes it visible.
You need to override the z-index value, you can have a look for the default values (for navbar and popover) in original Bootstrap's CSS file. In my case this helped:
.popover {
/* just in case it would overlap with fixed navbar, then show this over the navbar. Original value 1010, value for navbar is 1030 */
z-index: 1030;
}