AngularJS Material md-datepicker white screen background - angularjs

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.

Related

Cannot resize inline Angular-UI Bootstrap Date-Picker

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.

Vue Material. Disable button effect (md-button)?

any kind of documentation to disable the effect from the md-button?
Vue material
Thanks
Here is a working example of md-button with disabled attribute. The button becomes disabled if loading or if the form is invalid using vuelidate validation library.
<md-button #click.prevent="signup" class="md-accent md-raised" :disabled="loading || $v.$invalid">Sign up</md-button>

How to customize the angular material md-chips colour

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.

Angular material md-chips autocomplete incorrect rendering

I'm currently working with Angular-material.
What I'm trying to achieve is a input field with md-chips and autocomplete.
The problem that i'm having is that the "dropdown" with the suggestions doesn't render correctly. As in the last 2 items in the list don't render, as shown below.
And if I scroll all the way down it shows Test4/Test5/Test6, but not Test7 & Test8 (The list contains 8 items).
If I look in the dom I notice that there are no dom elements for the last 2 items.
The html code that I used is:
<md-chips ng-model="result" md-autocomplete-snap>
<md-autocomplete
md-autofocus="false"
md-min-length="0"
md-search-text="searchText"
md-items="item in items"
placeholder="Filter">
<md-item-template>{{item}}</md-item-template>
</md-autocomplete>
<md-chip-template><span><em>{{$chip}}</em></span></md-chip-template>
</md-chips>
I have a simple plunker in which you can see how it works.
How can I make the dropdown render correctly?
Edit:
I've noticed that if the dropdown is open and the window resizes the dropdown re-renders correctly

Angular Material: md-datepicker CSS display issue

I've upgraded to Angular Material 0.11.1. I'm using Angular JS v1.4.6. I'm trying to implement the new date-picker function. The issue I have is when I use the standard code as follows:
<md-content>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</md-content>
When I select the picker, I get a wierd display issue where half the screen is grey and can see part of the datepicker box. Once this is executed and try to select anything else with pop-up box the same thing happens. Anyone knows why this happening and how to fix it?
Images below:
I myself was having the exact same issue, every time I clicked to open the md-datepicker, I had a large white block at the bottom of my page.
After spending some time monitoring the page behaviour on clicking the md-datepicker, I realised that on clicking the md-datepicker, angular material was dynamically changing the css styling of the <html> and <body> classes in my css stylesheets, like so:
<body class="" style="position: fixed; width: 100%; top: -231px;">
<html lang="en" style="overflow-y: scroll;">
as a quick fix, I have set my body class like so, to override the dynamic changes:
body {
top: 0px !important;
}
Hopefully this will help others with the same issue.
I faced the same issue and applied the following tag in md-datepicker, it worked all fine for me :)
style="position:fixed;"

Resources