I want to use a antd context-menu on a d3js-svg, which works totally fine. However, this context-menu has a "closing" delay, that doesn't feel right for this application.
Is there a proper way to remove this closing delay? (I tried different values for transitionName and mouseLeaveDelay without any success)
<Dropdown overlay={this.state.contextMenu.menu} trigger={['contextMenu']}>
<svg height='70vh' width='100%'>
</svg>
</Dropdown>
Thanks in advance!
old (with mouseLeaveDelay={0}):
<Dropdown mouseLeaveDelay={0} overlay={this.state.contextMenu.menu} trigger={['contextMenu']}>
<svg height='70vh' width='100%'>
</svg>
</Dropdown>
Try removing the mouseLeaveDelay={0}it looks like it is an optional parameter and could be the culprit.
Since soemthing like this works:
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Hover me <Icon type="down" />
</a>
</Dropdown>,
I would guess it has something to do with how you created menu or your context menu trigger. Perhaps it is hung up at contextMenu. Try making it as simple as possible following the example and then work your way back to your solution and you will find the culprit.
Use the following css
.ant-dropdown {
animation-duration: 0s !important;
}
Hope, this will help.
Related
ion-item clickable event not working in ios but its working fine in android. Please help me, I am wasting my time in & I have searched lot of in google but find any sutaible answer.
<ion-content >
<div>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list lines="full" >
<ion-item class="bg-class" *ngFor="let project of filterData" (click)="onProjectClick(project.npProjCode);">
<ion-icon name="arrow-dropright-circle" style="width: 14px;margin-right: 10px;color: #129bcc;"></ion-icon>
<ion-label>{{project.npProjDescn}}</ion-label>
<ion-icon name="ios-arrow-forward" slot="end" style="color: lightgray;"></ion-icon>
</ion-item>
</ion-list>
</div>
</ion-content>
Got solution, Its work in ios & android
<ion-item button class="bg-class" *ngFor="let project of filterData" (click)="onProjectClick(project.npProjCode);">
-
ion-item[button] {
pointer-events: initial !important;
}
last time I have this problem I fix it like this , hop it work for you
#ViewChild('searchbar', { static: true }) searchbar: IonSearchbar;
ngOnInit() {
this.sub = this.searchbar.ionInput
.subscribe(q => this.getItems(q))
}
template
<ion-searchbar #searchbar ></ion-searchbar>
I have the similar problem, but after login. It was called at background. On Android it worked normally, however, on iOS it did not work at all.
Try to debug if Its not the same problem in .ts
I'm trying to build an application with Quasar Framework.
I want to have 2 QRouteTabs in the QToolbar that is located inside QLayoutHeader. I have this code:
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar color="primary" :inverted="$q.theme === 'ios'">
<q-tabs>
<div class="row">
<q-route-tab default="true" to="/" label="Найду еду"/>
<q-route-tab to="/contacts" label="Контакты"/>
</div>
</q-tabs>
</q-toolbar>
</q-layout-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
This is what I get:
As you see, there is an empty space above the QTabs. I want to get rid of it. How can I do this?
The proper way to do what you want is to remove the surrounding div and add slot="title" to the q-route-tab element.
This will stick the tab in the right place.
<q-tabs>
<q-route-tab slot="title" default="true" to="/" label="Найду еду"></q-route-tab>
<q-route-tab slot="title" to="/contacts" label="Контакты"></q-route-tab>
</q-tabs>
Codepen
I've looked at the page code in the browser and came up with the solution:
<style>
.q-tabs-head {
display: none;
}
</style>
I see this question, which is similar, but looks like no one was able to answer it.
I decided to implement an autocomplete dropdown with the HTML5 datalist, because I have about 1,000 items I'd like mobile users to be able to start typing and narrow the list down. Seems to work great on my Android, but on iOS no options come up at all.
Is this a known issue? I can't seem to find much info on it. I am thinking I will be looking hard for a screen position error (e.g., maybe the options are coming up off to the side of the screen area for some reason), but I'm baffled what else would cause this.
Here's the HTML:
<p>School 1</p>
<input type="text" id="input1" name="school" list="dlSchool1" class="collegeListInput" placeholder="Type a school's name..." />
<datalist id="dlSchool1">
<asp:Repeater ID="rpMobile" runat="server">
<ItemTemplate>
<option value="<%# Eval("SchoolName")%>"><%# Eval("SchoolName")%></option>
</ItemTemplate>
</asp:Repeater>
</datalist>
And some CSS:
.collegeListInput {
width: 225px;
margin-top: 20px;
}
In JQuery I do some stuff on the focusout event.
That's about it. Thanks in advance for any advice / resources. I'm on hour 14 of the workday, so be gentle if this is a really dumb question.
The datalist is not supported on iOS yet (note to visitors from the future, as of Oct 6, 2014 the current version of iOS is 8.0.2).
Can I Use - Datalist
How can I close a browser page via eg. an HTML button and Dart?
I've tried
window.close();
which doesn't appear to do anything;
I've also tried :
window.document.$dom_dispatchEvent();
using CloseEvent, but I'm not sure how to set that up.
I've also tried HTML and javascript without success.
Please advise how this can be done. It's needed for desktop-type apps IMO.
I used this:
<form method="post">
<input type="button" value="Close Window"
onclick="window.close()">
</form>
Maybe try
window.focus(); window.close()
In my requirement i want to change the background image of a link for hover,mouse out and active in my master page i tried a couple ways but it is not giving a right solution for me .Kindly any one guide me to get the solution and my format is like the below
<a href='<%: Url.Action("ListTask", "Task") %>'>
<img id="taskImage" src='<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>' onmouseover="this.src='../Content/Images/MasterPage/TaskMenuHover.png'"
onmouseout="this.src='../Content/Images/MasterPage/TaskMenuNormal.png'" /></a>
the above code will work fine and here i need to fix the hover image at the active of the link and not to be changed at the time of active view(MVC) in the master page.(This code will be in the master page).
can anyone provide solution in javascrip or jqery.
Thanks.
you could do:
$('#taskImage').hover(function(){
$(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
}
$('#taskImage').mouseout(function(){
$(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}
Use the hover function. The first parameter is used on mouseover, the second on mouseout.
HTML
<img id="taskImage" src="<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>" />
jQuery
$('#taskImage').hover(
function() {
$(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
},
function() {
$(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}
);
Personally, I'd amend your markup to include the image in the A tag as a background in CSS. then you can use A:hover, and A:active CSS states to amend your link. This then means no javascript needs to be used.