I have a filters section that is comprised of different . One of the container is 'Sort'. I wish to not have it to appear on a mobile viewport. I added the 'hide-sm' directive to md-input container. However, it doesn't seem to to work. Am i missing sthg here?
<md-input-container hide-sm>
<label>Sort</label>
<md-select ng-model="order">
<md-option value= "expression">
expression - asc
</md-option>
<md-option value= "-expression">
expression - dsc
</md-option>
</md-select>
</md-input-container>
I have included the Angular Material script in my index file.
try to use 'hide-xs' which hide element width < 600px
check here differ APIs to responsively show or hide elements
<md-input-container hide-xs>
<label>Sort</label>
<md-select ng-model="order">
<md-option value= "expression">
expression - asc
</md-option>
<md-option value= "-expression">
expression - dsc
</md-option>
</md-select>
</md-input-container>
Related
I'm trying to disable an Angular Material Autocomplete component. I would have expected to just be able to set disabled on the input, but that does nothing. (I also tried setting disabled on mat-form-field and mat-autocomplete.) Setting matAutocompleteDisabled on input prevented the options from showing, but still allowed typing in the field. Setting readonly on input prevented typing, but it doesn't change the UI, so seems like that will be confusing for the user. Is this a bug, or am I missing something?
Here's the closest I've come so far, using readonly (and disabled isn't working as expected)
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text"
disabled readonly
placeholder="Pick one"
aria-label="Number"
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
You should use formControl to set it, something like:
this.formGroupName.controls['myControl'].disable()
Use [attr.disabled]="true". It will set the disabled to true.
You can do css trick for this purpose.
Apply some class to parent tag of input. In you case upper tag is <mat-form-field class="example-full-width"> so i add disable-block class in this. And applied below css.
.disable-block {
pointer-events: none;
opacity: .7;
}
Full code here.
HTML
<form class="example-form">
<mat-form-field class="example-full-width disable-block">
<input type="text" disabled readonly placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
CSS
.disable-block {
pointer-events: none;
opacity: .7;
}
If you want more lighter text field then you can decrease opacity to .6 or .5 or more want you want.
Hope this will solve you problem.
I'm creating custom radio / checkbox icons by adding a pseudo-element on a label element with the :before css rule. I've added aria-hidden to the label element, but VO on iOS is still reading the pseudo-element.
I understand that some screen readers will ignore an aria-hidden attribute if the element is providing additional context (this is the case for label elements, since they provide additional information about a connected input element). To get around this I've added a aria-label attribute, but again, this is ignore by VO on iOS. This seems to fix the same problem for other screen reader, browser, and device combinations (Narrator and IE / Edge for example).
I've also tried to add a child span or i element to the label and add the :before css rule and aria-hidden attribute to that, but VO on iOS is still reading the pseudo-element.
Does anyone have any advice for having the screen reader read the correct content?
My basic approach is below (note: won't work in a jsfiddle since I'm not loading my font-face).
You can also view the first example here:
http://uatwww.surveygizmo.com/s3/4102902/Basic-Radio
<input type="radio" id="radio1" value="1" name="example" />
<label for="radio1" class="custom-icon" aria-hidden="true" aria-label="example 1">Example 1</label>
<input type="radio" id="radio2" value="2" name="example" />
<label for="radio2">
<span class="custom-icon" aria-hidden="true" aria-label="example 2"></span>
Example 2
</label>
<input type="radio" id="radio3" value="3" name="example" />
<label for="radio3">
<i class="custom-icon" aria-hidden="true" aria-label="example 3"></i>
Example 3
</label>
<style>
input[type=radio] {
opacity: 0;
position: absolute;
border: 0;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
input[type=radio] + .custom-icon:before,
input[type=radio] + label .custom-icon:before {
content: "\26aa";
}
input[type=radio]:checked + .custom-icon:before,
input[type=radio]:checked + label .custom-icon:before {
content: "\26ab";
}
</style>
I think the problem is that you are giving confusing instructions to both the browser and screenreader. You have an invisible input with CSS content attached to it, which is then associated to a label which is aria-hidden but also has an aria-label. You’re definitely going to get inconsistent interpretations of that markup across different browser/screenreader combinations.
I’ve used Heydon Pickering’s custom control method successfully on a bunch of sites with no problems. It seems like a simpler version of what you’re aiming for. It accessibly hides the input from everyone except screenreader software, puts the CSS content on a span instead of the label or input. He doesn’t use any ARIA, but if more recent versions of VoiceOver announce the CSS content you can just put aria-hidden on the span and let screenreaders treat the label and input as normal.
Concerning radio1, the W3C says:
If the current node is hidden and is not referenced by aria-labelledby or aria-describedby, nor referenced by a native host language text alternative element or attribute, return the empty string.
So as long as you reference an element even though it has the aria-hidden attribute, it will be spoken out.
If you want to give an alternative text for an element, you have to set the aria-label attribute on the element:
<input type="radio" id="radio1" value="1" name="example" aria-label="example 1" />
<label for="radio1" class="custom-icon" aria-hidden="true">Example 1</label>
Pseudo elements have different beheviours on browsers, and as you can see the alternative text for :before elements will be given even though the associated element is marked with the aria-hidden attribute.
I'm trying to assign a object id to a list item so that I can look it up when it's selected. There is an example here that uses a literal. It also works for me. This code doesn't set the value:
<paper-dropdown-menu label="Style">
<paper-listbox class="dropdown-content" attr-for-selected="value" selected="2">
<paper-item *ngFor="let style of styles" value="{{ style.id }}">
{{ style.name }}
</paper-item>
</paper-listbox>
</paper-dropdown-menu>
If I code value="1" or value="test", it appears when I inspect in the browser. If it's set as above, nothing appears, not even an empty value. I've also tried creating String test=1; in the Angular component and using value="{{ test }}". It also does not appear.
If this doesn't work, then it might be a timing issue:
attr.value="{{style.id}}"
I am using angular material version 1.1.1 and angularjs version 1.5.5. But the selected options are displaying top of the page.
<div layout="row" layout-align="space-between center">
<span>What is your favorite weapon?</span>
<md-select ng-model="weapon" placeholder="Weapon" class="md-no-underline">
<md-option value="axe">Axe</md-option>
<md-option value="sword">Sword</md-option>
<md-option value="wand">Wand</md-option>
<md-option value="pen">Pen?</md-option>
</md-select>
</div>
Is there any fix for this issue?
Please find the following screen shot:
In Angular Material, the default design of input directives is for the content within <label> to be displayed in the input element until the user enters some input, at which point it will float above the input element, as seen in all examples here.
Is there any way to force the labels to float above the input box at all times instead, even when no data has been entered?
I think the css class md-input-has-placeholder is what you need:
<md-input-container class="md-input-has-placeholder">
<label>Name</label>
<input type="text"/>
</md-input-container>
Plunker example here
Hope it helps.
The is an official feature for that: floatLabel="always"
The floatLabel property of can be used to change this default floating behavior. It can set to never to hide the label instead of float it when text is present in the form field control. It can be set to always to float the label even when no text is present in the form field control. It can also be set to auto to restore the default behavior.
<mat-form-field floatLabel="always">
<mat-label>Both a label and a placeholder</mat-label>
<input matInput [(ngModel)]="model.value">
</mat-form-field>
source, see the official form-field documentation
With Md-select this worked for me:
<md-input-container style="width: 200px;" md-input-has-placeholder>
<placeholder>Snack Types </placeholder>
<md-select ng-model="selectedOption">
<md-option ng-repeat="item in snacks" >
{{item.name}}
</md-option>
</md-select>
</md-input-container>
For the md-select element, occupy the following:
<md-input-container class="md-input-has-placeholder">
<label md-no-float="true" class="md-required">Snack Types</label>
<md-select ng-model="$ctrl.selection" ng-required="true" md-no-asterisk>
<md-option ng-value="option.id" ng-repeat="option in $ctrl.selection">{{ opcion.value}}</md-option>
</md-select>
</md-input-container>
I used the following CSS to change the label when data is being entered and highlight the other fields:
md-input-container:focus-within > label[class~="md-required"]{
transform: scale(1);
font-weight: bold;
}
And the following CSS so that the asterisk is always in color (you can put the color you want):
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after{
color: rgb(255,87,10);
}