I've set an mdl-tooltip on a button.
When the mouse hovers over the button, tooltip is displayed correctly.
When the mouse leaves the button, tooltip disappears correctly.
When button is clicked, button is disabled and the tooltip remains displayed. How do I fix this such that the tooltip is hidden when the button is clicked/disabled?
<button type="button" mdl-button mdl-button-type="icon" mdl-colored="primary" mdl-ripple mdl-tooltip="Disable Button" mdl-tooltip-position="bottom" (click)="isDisabled = true" [disabled]="isDisabled">
<mdl-icon>close</mdl-icon>
</button>
plunker: http://plnkr.co/edit/vGw8W93jR0j6qzHCyASS?p=preview
pointer events are not fired on disabled elements. (have a look for a discussion on that topic: Event on a disabled input)
you can change your code in this way to make possible what you are trying to do:
<span mdl-tooltip="blah">
<button mdl-button mdl-button-type="fab" mdl-colored="primary"
[disabled]="itemDisabled" (click)="itemDisabled=!itemDisabled">
<mdl-icon>add</mdl-icon>
</button>
</span>
(see also: https://github.com/mseemann/angular2-mdl/issues/535)
Related
I am using window.history.back(-1) to attempt to go back to the last url, however it will work until i goto another page scroll and enter another page url through click.
Then when i go back to the previous page it scrolls to last position, But when I click the Back button again it just goes back to the scroll position and not the previous page. Even though there was a previous page.
How do I fix this. Thank you.
`
<div class="button cart-button left-right" >
<button class="btn" onclick="window.history.back(-1)" ><i class="lni lni-pointer-left"></i>Go Back</button>
</div>
I have tried using the following but get only the same results.
window.history.go(-1)
I am not sure how else to approach this problem.
For example, I was using this:
<button onclick="editor.chain().focus().toggleBold().run()">
But I got the solution from the kind folks on the discord server.
For the menu item, specify type=button (otherwise browser might think it's a submit button type)
<button type=button onclick="editor.chain().focus().toggleBold().run()">
Using simple HTML code, no JavaScript, nothing fancy, I use this HREF
Click here
Clicking on the link in IE, FireFox, Edge does open a new tab for https://www.example.com on click. In Chrome (version 79), the click just redisplays the current page.
This happens on Chrome desktop and phone (Android). There are no add-ins to my installation of Chrome; no popup or ad blocking installed.
Why doesn't Chrome open a new tab when target="_blank" is used? Thanks.
Added
The issue seems to be with an HREF being inside a FORM element. The FORM element is as follows:
<form action='' method='post'>
An HREF with target="_blank" outside the FORM element works properly. Just not inside the FORM element.
But still puzzled as to why that would be the case...and for a workaround or solution.
Added more - plus code
There's a button inside the form, and the button contains an image, and the link in the button will not open up a new tab.
Simple form with the button
<form action='' method='post'>
<p>inside the form</p>
<p><button><img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' /> that's a button</button></p>
<p><button>that's a button </button></p>
</form>
So, with even further testing, the click to open a new tab won't work in Chrome when the HREF is wrapped around an button with an image inside a form. But works in FireFox and Edge.
Why?
There are four image/buttons inside the form. The fourth one is the HREF/blank. Items 1-2-3 are form submittals; values need to be passed to the form processing page. The 4th item doesn't need to be processed by the form, but it is inside the form so that all four items will be on the same line. If I place the 4th (HREF/blank) outside of the form, then the 4th item is wrapped around to the next line.
a
The <button> tag cannot be opened in a new tab the same way an <a> does.
You can use this instead:
<p>
<button onClick="window.open('https://www.bklnk.com/B004RVZRL0');">
<img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' />
that's a button
</button>
</p>
I am developing an automation script and a part of it requires me to hover over a navigation bar to display a dropdown menu. The script is written using NodeJS and the browser used is Internet Explorer.
Navigation source code
...
<ul class=navigation " data-dojo-attach-point="nonmMenu ">
<li class= "dropdown ">
<i class="fa fa-clipboard nav-icon " aria-hidden="true "></i><span>Accounts</span>
<div class='fulldrop i3">..</div>
</li>
</ul>
...
NodeJS code:
let xPathButton = "//span[text()='Accounts']";
//Find button to hover over
let buttonWithDropDown = driver.findElement(By.xpath(xPathButton));
//Hover
driver.actions().mouseMove(buttonWithDropDown).perform();
However, this does not work. The end goal is to click a link once the dropdown menu appears, which I have tried doing but as the element is not visible I get the exception ElementNotInteractableError: Cannot click on element. I would appreciate some pointers in the right direction to sort this out.
Update:
Been looking at this a bit more; Could the aria-hidden attribute in the anchor tag be causing the selenium driver to not detect the element?
Please note that changing the browser is not an option.
Try to hover over an a or li element. Also you can try click:
By.xpath("//a[span[.='Accounts']]")
By.xpath("//li[.//span[.='Accounts']]")
You can try open menu without opening menu with javascript:
executeJavaScript("arguments[0].click();", yourDropdownMenuElement);
Below is the html code when I inspected the 'Submit' button. When I inspected with firebug, it came like this,
.//*[#id='step-content-2']/div/md-step-actions/button[2]
But the #id='step-content-2' keeps on varying which is difficult for me to find the right xpath
Below is the inspect element code when i clicked the 'submit' button
<button class="md-primary md-raised md-button md-ink-ripple" ng-transclude="" type="button" ng-click="submit()">
<span> Submit </span>
<div class="md-ripple-container" style=""/>
</button>
//span[contains(text(),'Submit')]
You can use this XPath for clicking the submit button:
//span[normalize-space()='Submit']/parent::button
This XPath will always be unique.