I currently have a button that is functioning a little strange. Whenever you click right in the middle of the button, it works and carries on the requested action. However, if you click anywhere near the outside border of the button, then the action doesn't get carried out.
Here is the current code:
#if(mode == "Edit"){
<div class="Delete"><button class="btn btn-danger">
#Html.ActionLink("Delete Profile", "Delete", "GPS", new { Id = Model.provider.Company.Id.Value, oem = Model.provider.Id},
new { onclick = "return confirm('Are you sure you want to delete this provider?
All GPS Devices attributed to this provider will be removed as well.')" })</button></div>
}
If you check the resulting HTML of your code you will see the following structure:
<div>
<button>
<a></a>
</button>
</div>
Your event onclick is only attached to the <a> tag, so if you click in any place inside the <button> but outside the <a>, the action won't be fired.
By default <a> tags are inline, it means (among other things) its size is defined by its content so it won't fullfill the <button>, you can see this visually using the inspect tools from any brosers (like Chrome Developer Tools).
You can fix this using CSS to change the dimensions of your <a> tag. Try with display:block, width and height.
The final answer will depend on your other style rules.
Related
I have a button with a span inside it that is set to run a function v-on:click. I try to pick up the value1 value attached to the button (naming convention aside) by catching it as an evt.
The problem I'm getting is if I click the side of the button it runs as expected. But if I click the span inside it, I can't pick up the value1 because the evt.target is the span.
I'm converting an existing project to Vue, and this isn't the behavior I expected. What is the best way to deal with this?
Thanks!
<button id="touch-button" class="button float-center" value1="19" v-on:click="emit_values">
<span>19</span>
</button>
emit_values(evt){
$(evt.target).attr("value1")
}
Apparently this is a generic html/javascript issue.
Solution is here: Missing click event for <span> inside <button> element on firefox
I've changed it to target evt.currentTarger, then used css to add the pointer-events: none; styling to all children of those buttons.
I have a custom component in angular that handles images. I have alt text as an input to the element and the screen reader picks it up to utter it out. But whenever I tab to the image, it says 'Trash' group. I want the screen reader to read it out as 'Trash' button. How can I achieve this? The following is my current implementation:
Icn component:
<img [ngClass]="class" [file]="file" [alt]="alt">
Usage:
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
I tried role="button" but that didn't work.
I don't know Angular so you may need to do some digging on how to structure this but your approach is making things difficult.
Instead make the button a <button>. This way you get all the native accessibility built in (e.g. accessible via tab by default, accepts focus, has hover and focus states etc.)and you will also get the correct announcements in screen readers.
Then place the icon inside the <button> and just style it appropriately.
<button> <!--add whatever directives angular requires here-->
<img [ngClass]="class" [file]="file" [alt]="alt">
</button>
Also you may consider using inline SVGs for your icons as they offer styling options and can change colour according to user preferences. It is also one less resource to download so will help with performance.
I figured out the solution to this problem by experimenting more with the roles.
The image tag doesn't take the role="button" as an attribute. Instead, the role needs to be assigned to the parent element of the image tag i.e., in my case the component icn like follows:
<icn class="del-icon" role="button" [file]="'trash'" [alt]="Trash"></icn>
Now, the screen reader software reads out as the 'Trash button' and gives further more instructions on how to interact with the button. And also if the above doesn't work, just by encapsulating the custom component in a span tag and assigning the role="button" to the span tag works like a charm.
<span class="del-btn-container" role="button">
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
</span>
Note: Button role examples
I know how to do using html and JavaScript
<h2 id="C4">Chapter 4</h2>
Jump to Chapter 4
This is what I am trying in SAPUI5. On click to Back to top link it should navigate to helpButton. This is not working for me.
<Button id="helpButton" icon ="sap-icon://sys-help" />
<Link text="Back to top"
press="#helpButton"/>
You can actually do this in UI5. A little differently than how you tried though.
The problem is that the UI5 ID is not the same as the HTML ID (which is what you want to use with the hash-link for the browser to jump there). Also, you cannot specify a URL inside the press "attribute" of the link. The press "attribute" is in fact an event (so you can only specify an event handler name).
So to be able to do what you want, you have to use the href property of the Link and fill it with the HTML ID of the target control. You can do this on the onAfterRendering hook of the view (that's when you are able to find the HTML ID of the target control):
onAfterRendering: function() {
var oRef = this.byId("target").getDomRef();
this.byId("link").setHref("#" + oRef.id);
}
You can find a working fiddle here: https://jsfiddle.net/93mx0yvt/26/.
I come across two following code snippets :
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
<h1>My First JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button>
<p id="demo"></p>
I am not able to understand why the different type="button" attribute has been added in second code snippet?
What's the difference between two buttons?
In your examples the addition of the type="button" makes no difference whatsoever (remove it and you'll see).
Typically you would specify the type of your button if it is being used in a form, as the default type of <button> is submit, and clicking it would cause a <form> to be submitted, and typically either reload the current page or load a new page.
By specifying the type as button instead of the default submit, you prevent that behavior.
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
It has so many Attributes and type is one of them and this type has 3 values:
button (Normal button)
reset (to handle reset action, specially for form)
submit (to handle form submit)
To know other properties you can read:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
https://www.w3schools.com/tags/tag_button.asp
The attribute type decide the style of <Button>. It's default value is button in Internet Explorer.However, in other browser,it's default value is submit even in standard of W3C.
So you need to define the type of button always.
There are three types of buttons:
submit — Submits the current form data. (This is default.)
reset — Resets data in the current form.
button — Just a button. Its effects must be controlled by something else (that is, with JavaScript).
Button attribute is not that big deal, because it changes nothing in your code.
The only difference in your two code versions are writing the whole code after the "onclick" attribute (code2) and writing the function name after the "onlick" attribute (code1).
You can read about the button attributes and differences between input and button with the same attributes on this site http://html.com/attributes/button-type/
I hope it will help you a lot.
Writing <button type="button"> defines the button as a clickable button.
There is no big difference with <button>, but it is more safe to put a type attribute to the button element because some browsers may use different default types for the <button> element, which could lead to bugs.
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span