Unfortunately we have to support IE11.
The following is a snippet of Angular from our app:
<nav class="navbar-menu" fxFill>
<span class="fill-it"></span>
<span class="nav-user-wrap" fxFlexAlign="right">
<button class="nav-user" mat-button [matMenuTriggerFor]="usrmenu">{{ userManager.currentDealer?.name }} <mat-icon class="icon-avatar">person</mat-icon><mat-icon class="icon-arrwdwn">keyboard_arrow_down</mat-icon></button>
<mat-menu #usrmenu="matMenu" class="userdd mmdd" xPosition="after" yPosition="below" [overlapTrigger]="false">
<span mat-menu-item [disabled]="true" [disableRipple]="true">{{ userManager.firstName }} {{ userManager.lastName }}</span>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<span mat-menu-item *ngIf="!userManager.isDealerGroupUser" (click)="openSelectDealerGroupDialog()">{{ userManager.dealerGroup?.name }}</span>
<mat-divider *ngIf="!userManager.isDealerGroupUser" style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<button *ngFor="let dealer of userManager.dealers" (click)="userManager.setCurrentDealer(dealer.id)" mat-menu-item>{{ dealer.name }} <span *ngIf="dealer.id === userManager.defaultDealer?.id">(Default)</span></button>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<!-- <button mat-menu-item>My Account</button>
<button mat-menu-item>Settings</button> -->
<button mat-menu-item (click)="logOut()">Logout</button>
</mat-menu>
</span>
</nav>
Pretty standard drop-down menu, but in IE11 clicking the button gives the following exception:
Unable to get property 'opacity' of undefined or null reference
I'm pulling my hair out trying to work out why.
Does IE11 do some kind of pseudo-script thing in the background to set the CSS or something? No idea.
All help appreciated!
This error is a result of IE11 lacking the Web Animation API, to fix this You have to import the right polyfill as documented in Angular Docs.
import 'web-animations-js'
Angular docs say that you only need the 'web-animations-js' polyfill for IE if you use the AnimationBuilder, but my project doesn't use AnimationBuilder and I get this error message. There's a possibility one of the libraries I'm using does. But I only started getting this error after I upgraded to Angular 8.
Related
I realized #dblclick not working on chrome. I tested same code on firefox and it worked OK.
Here is the piece of code
`<Tasks #toggle-reminder="toggleReminder" #delete-task="deleteTask" :tasks="tasks" />`
`toggleReminder(id){
console.log('clicked'+id);
}`
The event was emited like this fro an underlying Component:
`<div #dblclick="$emit('toggle-reminder', task.id)" :class="[task.reminder ? 'reminder' : '', 'task']">
<h3>{{ task.text }}
<i #click="$emit('delete-task', task.id)" class="fas fa-times"></i>
</h3>
<p>{{ task.day }}</p>
</div>`
I am afraid it is navigator problem, as I said, it works good on firefox
I found that when I have the developer tool opened then dblclick event does not work, but when I close the developer tool then event work. Still weird
I'm currently making an mobile web application with next.js boilerplate.
My back button code is this.
import Router from 'next/router'
<button>
<a href="#" onClick={() => Router.back()}>
<span> some back button icon here </span>
</a>
</button>
I don't think there's anything wrong with my html code but when clicking that button on
safari browser, it doesn't work. Anybody had same experience? or know the solution? or know why this is happening?
please share ;
FYI. I've tried major browsers like IE, Chrome, Firefox but only Safari don't work.
this work for me:
import Router from 'next/router'
...
<button>
<a href="#" onClick={(e) => { e.preventDefault(); Router.back(); }}>
<span> some back button icon here </span>
</a>
</button>
A little late, but I'm sure someone needs it.
I have what I think is a basic question for Vue, but I'm trying to run a method on click while also running a v-for loop on a component.
I'm not sure why but I can't get anything to run on that click handler but I see nothing in the Vue documentation saying that this isn't possible. Right now I'd settle for getting my console log running.
<IconBox
v-for="step in steps"
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
Here is the template for IconBox.vue:
<template>
<div class="icon-box">
<div
class="icon-holder"
:style="{ backgroundImage: 'url(' + step.image + ')' }"
>
</div>
<div class="text">
<div class="inner">
<h5>{{ step.name }}</h5>
<p v-if="step.description">{{ step.description }}</p>
{{ isSelected }}
</div>
</div>
</div>
</template>
I could run the click in the component itself but I need the parent well aware of what's happening to handle a selected boolean.
To use native events in component tags you should add .native modifier
<IconBox #click.native="yourMethod"/>
Check this guide.
To check it I suggest you to create a method and add console.log() inside it.
I have been playing around with Vue lately, and here's how I solved a similar problem in my project
<IconBox
v-for="step in steps"
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
Changes to
<template v-for="step in steps">
<IconBox
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
</template>
Here is the scenario, I have multiple tiles on home page. when a user logins in for the first time some of them need to be disabled. Same i am trying to test using selenium.
To disable the div i am using ng-class by which i am applying .disableDiv class on the div which has below css
.disableDiv {
pointer-events: none;
opacity: 0.4; }
When i target it using .isEnabled() but it is showing true even if the disable class is applied on it.
Please suggest how should i target the disabled elements.
below as you see isNewUser is ng-class which applies .disableDiv on the element which makes is disabled for the end user.
Thanks in advance
HTML
<div class="col-md-6 col-sm-12 tile-box-1" id="div-importcontent" ng-class="isNewUser">
<div class="tile-box-2">
<div class="col-md-2 col-sm-2 col-xs-3 tile-box icon-box">
<!-- icon -->
<a class="d-icon-download icon" ui-sref="importcontent" id="a-importcontent"></a>
</div>
<div class="col-md-10 col-sm-9 col-xs-8 tile-box desc-box">
<h4 class="heading" ui-sref="importcontent" id="h4-importcontent">Import content</h4>
<!-- <a class="d-icon-info_circle icon-info"></a> -->
<span class="desc" ui-sref="importcontent" id="span-importcontent">Import installed applications reporting content into BMC Remedy Smart Reporting
</span>
</div>
</div>
</div>
I am currently working on a slider, using touchSlider, and it mouseTouch option won't work for me.
Slider itself works fine, but not the mouseTouch option.
What am I doing wrong?
Here is my js:
$(document).ready(function() {
$(".touchslider").touchSlider({ mouseTouch: true });
});
and html:
<div class="touchslider">
<div class="touchslider-viewport" style="width:500px; height: 375px;overflow:hidden; border: 1px solid #f00;"><div>
<div class="touchslider-item"><img src="img/3540115854_5d302001da.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3542680555_ea43d85e0a.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3540231388_f8ec22b549.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3546828250_6f91b64ba7.jpg" width="500" height="354" /></div>
</div></div>
<div>
<span class="touchslider-prev">←</span>
<span class="touchslider-nav-item touchslider-nav-item-current">1</span>
<span class="touchslider-nav-item">2</span>
<span class="touchslider-nav-item">3</span>
<span class="touchslider-nav-item">4</span>
<span class="touchslider-next">→</span>
</div>
</div>
Got the same problem when accessing the .html via my local file system using the file-protocol
file://pathtothehtml/touchslidertest.html
The problem does not occur when I accessing the .html using http
http://hostnametothehtml/touchslidertest.html
I used chrome,firefox and safari on MacOS - using http solved the problem on all of them.
cause analysis
The browser handle the results gathered using the file-protocol different to results gathered via the http.
Careful: the following is only guessing, since I had not found anything about how any of the common browser handles the file-protocol.
Maybe the browser supports drag&drop for the file-protocol. This support may override the event handling of the page interpreter in the browser - such that the drag event on the image does never reach the DOM-event handling routine for the page.