the suggestion dropdown disappears when user clicks the input then press esc key.
then a weird progress bar keeps cycling..
I need to disable this function
First, you should add an id or a class in your md-autocomplele. Then, try this:
#id md-progress-linear .md-container
{
display: none;
}
or
.class md-progress-linear .md-container
{
display: none;
}
Hope this help.
I deal with this error one entire day, but the solution is simple: update your angular-material library.
More information? Version 1.1 work fine. If you look the solution is here: https://github.com/angular/material/commit/e821ae327f4ed193d14450aa0c83cd457092f563 (line 446 of autocompleteController.js)
Related
I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
How to remove the icons in the mat-step-icon using angular material.
I tried below:
<ng-template matStepperIcon="edit"></ng-template>
<ng-template matStepperIcon="done"></ng-template>
this works for edit and done state. want to change the default state as well. dont know what is the name to give.
can anyone help please?
thanks
Here is a simple workaround from the GitHub issue
#ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;
ngAfterViewInit() {
this.stepper._getIndicatorType = () => 'number';
}
You can use the following template to remove the icons from default state:
<ng-template matStepperIcon="done"></ng-template>
From the docs, the possible values for matStepperIcon are
number | edit | done | error
So for default state, you'll want to use number since you have edit and done covered.
You should end up with this:
<ng-template matStepperIcon="number"></ng-template>
On Angular Material v.14.1.3, you could add completed="false" properties in <mat-step completed="false"></mat-step>. the step icon will keep number index for selected step.
You can use this style in your css file of your angular project.
.yourParentDivCssClass ::ng-deep .mat-step-header .mat-step-icon {
display: none !important;
}
if you want to remove all the icons on your material stepper one solution is to go to your styles.css file and add the following:
.mat-step-header .mat-step-icon {
display: none !important;
}
This should do the trick
I have a number of tabs, representing different services. I wish to have a final 'tab' tagged on the end of the list used to add a new service. Denoted by a simple '+'. This will open a simple dialogue.
I was hoping I could put my own ng-click behaviour on this single tab and prevent default but this doesn't work.
Is there any way I can 'catch' the tab click event BEFORE the tab body switch takes place and prevent it from happening?
It seems that it is not possible at the moment (see e.g. https://groups.google.com/forum/#!topic/ngmaterial/rNWMk3S9uDI) - at least using official api.
If you are ok with a solution which hacks into the directive internals then you can do following:
angular.module('MyApp').directive('tabWatcher', function() {
return {
require: ['mdTabs'],
restrict: 'A',
link: function(scope, el, attrs, controllers) {
var mdTabsCtrl = controllers[0];
var origSelectFn = mdTabsCtrl.select;
// overwrite original function with our own
mdTabsCtrl.select = function(index, canSkipClick) {
if (...) {
origSelectFn(index, canSkipClick);
}
}
}
};
I've placed a demo here http://codepen.io/jarek-jpa/pen/wGxqOq . Try to click some tabs. The select() call will be intercepted and depending on a condition let pass or not.
Disclaimer: Again, it hacks into the md-tabs directive internals, so may stop working any time (tested with angular-material 1.0.7)
You can set pointer-events to none to prevent the md-tab from responding to clicks.
Example:
<style>
md-tabs.readonly {
pointer-events: none;
user-select: none;
}
</style>
<md-tabs class="readonly">
<md-tab label="can't touch this"></md-tab>
</md-tabs>
This is tested to work with Angular Material 1.0.1
I am using fantastic gem "parsley-rails", it works just perfect for my application.
But now I am facing problem of removing those error messages, because they change form layout.
My html looks like this :
<input data-parsley-minlength="3" data-show-errors="false" id="message_name" name="message[name]" placeholder="Kā Jūs sauc ?*" required="required" type="text" data-parsley-id="9402" class="parsley-error"><ul class="parsley-errors-list filled" id="parsley-id-9402"><li class="parsley-required">This value is required.</li></ul>
My css:
li.parsley-required {
display:none !important;
}
ul.parsley-errors-list {
display:none !important;
}
ul.parsley-error-list li {
display:none !important;
}
This code hide all error messages on first validate click. But If I change input value error message is shown again.
I tried to look some Google results, but no valid resources.
Any tip on this ? Thanks in advance..
It's not clear what you're trying to do.
Errors should get removed automatically by parsley.
If you're doing something funky, call $form.parsley().validate() on your form, or call $field.parsley().reset() on .
I have a custom select menu (multiple) defined as follows:
<select name="DanceStyles" id="DanceStyles" multiple="multiple" data-native-menu="false">
Everything works fine except that I want to move the header's button icon over to the right AND display the Close text. (I have found some mobile users have a problem either realising what the X icon is for or they have trouble clicking it, so I want it on the right with the word 'Close' making too big to miss.) There don't seem to be any options for doing that on the select since its options apply to the select bar itself.
I have tried intercepting the create event and in there, finding the button anchor and adding a create handler for that, doing something like this (I have tried several variations, as you can see by the commenting out):
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn').button({
create: function (event, ui) {
var $btn = $(this);
$btn.attr('class', $btn.attr('class').replace('ui-btn-left', 'ui-btn-right'));
$btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// $(this).button({ iconpos: 'right' });
// $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// // $btn.attr('data-iconpos', 'left');
$(this).button('refresh');
}
});
}
});
});
So I have tried resetting the button options and calling refresh (didn't work), and changing the CSS. Neither worked and I got weird formatting issues with the close icon having a line break.
Anyone know the right way to do this?
I got this to work cleanly after looking at the source code for the selectmenu plugin. It is not in fact using a button; the anchor tag is the source for the buttonMarkup plugin, which has already been created (natch) before the Create event fires.
This means that the markup has already been created. My first attempt (see my question) where I try to mangle the existing markup is too messy. It is cleaner and more reliable to remove the buttonMarkup and recreate it with my desired options. Note that the '#search' selector is the id of the JQ page-div, and '#DanceStyles' is the id of my native select element. I could see the latter being used for the id of the menu, which is why I select it first and navigate back up and down to the anchor; I couldn't see any other reliable way to get to the anchor.
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn')
.empty()
.text('Done')
.attr('class', 'ui-btn-right')
.attr("data-" + $.mobile.ns + "iconpos", '')
.attr("data-" + $.mobile.ns + "icon", '')
.attr("title", 'Done')
.buttonMarkup({ iconpos: 'left', icon: 'arrow-l' });
}
});
});
The buttonMarkup plugin uses the A element's text and class values when creating itself but the other data- attributes result from the previous buttonMarkup and have to be removed, as does the inner html that the buttonMarkup creates (child span, etc). The title attribute was not recreated, for some reason, so I set it myself.
PS If anyone knows of a better way to achieve this (buttonMarkup('remove')? for example), please let us know.
the way i achieved it was changing a bit of the jquery mobile code so that the close button always came to the right, without an icon and with the text, "Close"
not the best way i agree. but works..
I got a similar case, and I did some dirty hack about this :P
$("#DanceStyles-button").click(function() {
setTimeout(function(){
$("#DanceStyles-dialog a[role=button]").removeClass("ui-icon-delete").addClass("ui-icon-check");
$("#DanceStyles-dialog .ui-title").html("<span style='float:left;margin-left:25px' id='done'>Done</span>Dance Styles");
$("#DanceStyles-dialog .ui-title #done").click(function() {
$("#DanceStyles").selectmenu("close")
});
},1);
} );