Develop Reference

Is there a way to use Angular Material without the styling?

My company currently uses Angular Material to style inputs, buttons and etc. We're moving to a different style but Id still like to use the fancy components like Datepicker, Prefix, Suffix, and alike.
Is there a way to use material components with our own custom style?
Attached is a picture of the Datepicker vs our new style. We'd like the datepicker to take on our new style, getting rid of all the Material styling.
Here is an example of the different types of html:
//Material Input
<mat-form-field floatLabel="always" class="dynamic-input" *ngIf="answer.isInput && !answer.isConditional">
<span matPrefix *ngIf="answer.hasPrefix">{{answer.prefixText}}</span>
<input matInput (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null" [placeholder]="answer.placeholderText" [name]="answer.propertyKey" [ngModel]="object[answer.propertyKey]" (ngModelChange)="object[answer.propertyKey]=$event" type="text">
<span matSuffix *ngIf="answer.hasSuffix">{{answer.suffixText}}</span>
</mat-form-field>
<mat-form-field floatLabel="always" class="dynamic-input" *ngIf="answer.isInput && answer.isConditional && returnConditionIsTrue(answer)">
<span matPrefix *ngIf="answer.hasSuffix">{{answer.prefixText}}</span>
<input matInput (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null;" [placeholder]="answer.placeholderText" [name]="answer.propertyKey" [ngModel]="object[answer.propertyKey]" (ngModelChange)="object[answer.propertyKey]=$event" type="text">
<span matSuffix *ngIf="answer.hasSuffix">{{answer.suffixText}}</span>
</mat-form-field>
//Our Input
<div class="input-wrapper" *ngIf="answer.isInput" [style.width]="((answer.width/100) * 50) + 'rem'">
<input type="text" (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null" [placeholder]="answer.placeholderText" [name]="answer.id" [(ngModel)]="responses[returnResponseIndex(answer)].value" class="input-box normal-input-box" *ngIf="!answer.isConditional && !answer.isAddressSearch && !answer.isVehicleVIN">
<input type="text" (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null" [placeholder]="answer.placeholderText" [name]="answer.id" [(ngModel)]="responses[returnResponseIndex(answer)].value" class="input-box normal-input-box" *ngIf="answer.isConditional && !answer.isAddressSearch && !answer.isVehicleVIN && returnConditionTrue(answer.conditionAnswerId ? returnResponseValue(responses[returnConditionResponseIndex(answer.conditionAnswerId)]) : null, answer.conditionValue)">
</div>

you can add styles to classes that Angular Material uses (check them with inspect on chrome browser) in your styles.scss or in any other global styles file you have.
If you want to change them in each component you can create a parent class, and then penetrate the angular material classes using ::ng-deep .my-class .mat-button .mat-button-wrapper {...}
good luck! it's a lot of trial and error, but doable!
note: be aware that the styles that are applied are those with 'more' selectors... so if you see .mat-button.mat-primary .mat-button-wrapper {} in your inspect, don't simply try to override the .mat-button-wrapper because it doesn't have enough specificity, you need to use the specificity of material plus your own to override the one in place.

Although possible as others have indicated, as a development effort this is likely to take more effort and be more prone to problems than simply moving to something else. It would be extremely difficult to provide sufficient test coverage that might ensure you've done everything properly, so that something doesn't suddenly rear its ugly head in production.
If you really want to do this, create your own fork of the #angular/material project (or simply steal the source code), and rewrite all of the style code to suit your needs.

Angular Material input not showing value when not focused

I'm using Angular Material 1.0.3 and <input> elements are correctly set but their values are visible if I click one to focus it. Once it's not focused I can't see the value.
The markup is as follows:
<md-input-container>
<label>Some label</label>
<input ng-model="model.someProperty">
</md-input-container>
After checking if it's a CSS issue, I've found that the following CSS selector is turning color into transparent:
md-input-container:not(.md-input-has-value) input:not(:focus) {
color: transparent;
}
And obviously, it seems like the input doesn't have the .md-input-has-value CSS class.
For now, I can't figure out what's going wrong.
Additional info
In my case, in opposite of Angular Material demos, controllers are on directives and UI Router states.
In fact, I can confirm that I've already copy-pasted the same markup in my index.html as direct child of <body> and then it works as expected.
Maybe it has some relation with this open issue: Compiling material directives on the fly: md-input-has-value attribute not set #3017.
<md-input-container> has the md-input-has-value CSS class
I've also checked that <md-input-container> has the md-input-has-value CSS class.

This issue may also occur when you nest md-input-container like this:
<md-input-container class="md-block">
<md-input-container class="md-block">
<label>Some label</label>
<input ng-model="model.someProperty">
</md-input-container>
</md-input-container>
I just had to remove this extra md-input-container and problem solved.
Explanation (given by Segev -CJ- Shmueli):
When you add a value it adds class="md-input-has-value" to the
wrapping md-input-container. If your input is wrapped by yet another
one it, it will not receive that class and as a subsequence the text
will become transparent.

Angular material version - v1.0.1-master-edfe2ad
Just subscribed to help put anyone who is having this issue.
Go to the angular-material.css file and change this (for my is line 11,334)
md-input-container:not(.md-input-has-value) input:not(:focus),
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
color: transparent; }
to color black and viola fixed....

Finally I did something I should did a week ago: try the same app on other Web browsers.
Exactly the same code in Firefox, Internet Explorer 11 and Edge works as expected: it doesn't suffer the issue explained in my question.
The joke here is a simple snippet doesn't demonstrate the issue, because with this simple markup Chrome 47 returns 0 nodes when querying the selector using document.querySelectorAll. In my actual markup, it finds the whole element.
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("result").textContent = "elements found: " + document.querySelectorAll("md-input-container:not(.md-input-has-value) input:not(:focus)").length;
});
<md-input-container class="md-input-has-value">
<label>Some label</label>
<input ng-model="model.someProperty">
</md-input-container>
<div id="result"></div>
Update
I've updated Chrome to 48 and the problem has been solved. After all, it's a browser-specific issue with :not selector when the elements are very nested. If someone can find an open/closed issue in Chrome's issue tracker it would be great in order to add a link in my answer.
Update 2
Argh! Now some <input> fields work well and others are still experiencing the issue. They're the ones that are inside directives.
In Firefox, Explorer and Edge still works everything.

I was working on some input fields and faced the same issue. Please check your code and make sure you're not using input container inside another input container like
<md-input-container class="md-input-has-value">
<label>Some label</label>
<input ng-model="model.propertyName">
</md-input-container>

Typeahead placing span tag after my label tag for my search. How can I add a label properly?

We have to be ADA compliant on our site. One of the things they look for is every form must have a label tag. The code has a label tag in the right place, but then when the javascript loads on the page, a span tag gets between the tag and the search field making it no longer compliant. I don't see a way to add a label. I was curious if anyone else had a suggestion for this or is there an alternative to typeahead that will work? In order to be compliant it must look like
<label for="search">Search: </label>
<input type="text" name="search" id="search"/>
For example the way it works now looks like...
<label for="search">Search: </label>
<span class="twitter-typeahead">
<input type="text" name="search" id="search"/>
</span>

There is no option to change the span tag that wraps your input. You can see where it is hardcoded in the source code here. Unfortunately, typeahead is no longer maintained either, so there will not be a future option to customize this.
However, you can always modify the code yourself. Either in the www.js file that I linked to (if you compile yourself) or in the bundle, find the buildHtml() function and change that line to an empty string.
function buildHtml(c) {
return {
wrapper: '',
menu: '<div class="' + c.menu + '"></div>'
};
}
I don't know if this will have unknown repercussions elsewhere in typeahead, but I just tried it on a page and everything seemed to be working fine.

How to apply style from jQuery autocomplete CSS using Django?

I am trying to implement JQuery Autocomplete plugin using Django.
I've been able to wire the thing together and I can actually see the result back in the HTML template.
My problem is that the JQuery Autocomplete CSS doesn't seem to work.
The results I get are not well-formatted/styled, have no background and you cannot even select them.
What is it that I am missing?
I have these three files in my media folder the same folder:
autocomplete.js
dimensions.js
autocomplete.css
In my html template I have the following function:
$(function(){
setAutoComplete("tags", "tagResults", "/taglookup/?query=");
});
My textfield looks like this;
<input type="text" name="tags" value="">
Where do I put the tagResults in my HTML template document? Every time I try to introduce a DIV with id="tagResults", JQuery throws an error.
Any ideas?

How do I make the jquery dialog work with the themeroller themes?

I am trying out the dialog from jquery UI. All the online demos use flora.css.
I can't get the dialog to display correctly with the css file generated by the themeroller application.
Am I missing something? Should these things work out of the box?
Update: Thanks Brock. When I cleaned up my code to make a sample, I realized that the HTML in demo.html (that comes with the themeroller.zip) is a little too verbose.
All I needed to do was give the dialog div the attribute class="ui-dialog" like this:
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
I'll accept your answer. Thanks for your time.

I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the ui-dialog class.