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>
Related
I have a material date picker that functionally works just fine but has some styling issues.
I would like the text "Choose a date" to show up on the left side of the calendar icon, as it does in this example: https://material.angular.io/components/datepicker/overview
but as you can see it's like the calendar icon is pushed so far to the left that it shoves the text up.
Here is the html for this:
<mat-form-field appearance="fill" class="col-md-6">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="startDate" (dateChange)="setMinEndDate($event)" [min]="today" [(ngModel)]="model.startDate">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
I have no other CSS or HTML for this. The date picker does exist inside a container class but even if I put it outside, or in a blank html page it still looks like this. I then assumed it had to be something with global styling. My app.component.css is completely blank. In my src folder in style.css I do have the global styling for angular material: #import "~#angular/material/prebuilt-themes/indigo-pink.css"; which seems to make everything else angular-material related work properly. Deleting this does not solve my problem as a global theme is required.
I am using angular material version 11.2.13 and Angular Core version 11.2.14.
What else could be causing this problem? Let me know if you need me to share anything else.
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.
We have written customised checkbox which has divs for square and label.
Issue:Checkbox div has ng-click which should only be fired when clicked on square box but it also get fired if I click on Text next to it in IE11 Version 11.0.9600.16428.
Our implementation is working fine in Chrome and Mozilla but gives above issue when executed in IE11.
Sample Code link: (Please run this code in Chrome & IE11)
http://jsbin.com/luzogucasi/5/edit?html,js,output
Please help.
I have also raised issue in github
That is only expected behavior, because you used for="k".
The for attribute will target the id="k", and whenever you clicked on label it will focus element with id="k" which you mention in for attribute.
Remove attribute for="k" from label will work proper on each browser.
HTML
<div>
<div id="k" ng-click="userClicked()" class="disp">
<div class="check-no"></div>
<div class="check-yes" ng-show="checked"></div>
</div>
<label class="disp label">
{{checkText}}
</label>
</div>
NOTE
This is not angular related issue
JS BIN
Hope this could help you, Thanks.
I'm following a code found in AngularJS API documentation for "typeahead": http://angular-ui.github.io/bootstrap/
I am able to fill the text box with the first choice by pressing enter, but for some reason, I cannot select through any of the items from the autocomplete list with my arrow keys (up and down), but in their example, I could.
What could be the problem here?
** Note, this is an Express project, and I'm using the Jade engine.
Header files
link(rel='stylesheet', href='/css/bootstrap.css')
script(src='/js/jquery-2.1.1.min.js')
script(src='/js/angular.min.js')
script(src='/js/bootstrap.min.js')
script(src='/js/ui-bootstrap-tpls-0.11.0.min.js')
script(src='/js/index.js')
partial code in index.html
<div ng-controller="TypeaheadCtrl" class="col-md-5 ng-scope">
<pre class="ng-binding">Model {{selected}}</pre>
<input type="text" ng-model="selected" placeholder="item name" typeahead="item for item in items | filter:$viewValue | limitTo:8" class="form-control" >
</div>
index.js
var App = angular.module('myApp', ['ui.bootstrap']);
function TypeaheadCtrl( $scope, $http ) {
$scope.selected = undefined;
$scope.items = ['Chicken', 'Corn', 'Ice Cream', 'Cereal'];
}
After playing around a bit more, I found that there's another autocomplete from my browser. Probably chrome autofill? Maybe my up and down is being used for this instead of being used for my web app? If so, how would you disable that via code so I can use it for angular's autocomplete on this page only?
Try setting autocomplete="off" at the <form> or <input> level.
The docs for autocomplete can be found in Mozilla's <input> section
I found the problem! The AngularJS version 1.3.0(beta), which I was using, was buggy. ng-mouseenter was not working and changing the selected index. I used the AngularJS version 1.2.19 (latest stable build) and it works perfectly now.
Problem Example (v1.3.0 beta-14)
http://plnkr.co/edit/PazPIkWAce6e59OEmn7n?p=preview
<script src="https://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
Working Example (v1.2.19 stable)
http://plnkr.co/edit/pkbcsaPyJEJbCYVcZYpB?p=preview
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
I had to make this change in ui-bootstrap-tpls-0.11.0.js for it to work
angular.module("template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templ
$templateCache.put("template/typeahead/typeahead-popup.html",
- "<ul class=\"dropdown-menu\" ng-if=\"isOpen()\" ng-style=\"{top: position.top+'px', left: positi
+ "<ul class=\"dropdown-menu\" ng-show=\"isOpen()\" ng-style=\"{top: position.top+'px', left: posi
Changing ng-if to ng-show fixed it
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.