so I'm currently trying to disable a button but also have the same button type. If anyone can help me with examples it would be great! Thanks so much to the ones that help! :D
<!--- I want this one to be the working button. --->
<a
class="project-link"
target="_blank"
href="/gimkit"
>Use <i class="fas fa-check-circle"></i> </a
>
<!--- this one to be the button that doesn't work. (disabled)
--->
<a
class="project-link"
target="_blank"
href="/support"
>Help <i class="fas fa-question-circle"></i> </a
>
I want something like this, but have the Help Button with a question mark to be faded instead of the normal button.
https://i.stack.imgur.com/QXRMz.png
For <button> element, just add the disabled property:
<button type="button" disabled>Help</button>
I think the button-elements answer is the best solution.
But if you really want to stick with the Anchor-Tags, you could also try to add a helper css class. For example you can use something like this:
<a
class="project-link disabled"
target="_blank"
href="/support"
onclick="return false;"
>Help <i class="fas fa-question-circle"></i> </a
>
And the css of the .disabled class could look like this:
.project-link.disabled{
opacity:0.5;
}
Related
<button class="fa fa-caret-down font-size-18px" style="border: none"
#pop="bs-popover"
[popover]="fil"
placement="bottom right"
[adaptivePosition]="true"
[outsideClick]="true"
(keydown)="keydownEvent($event,pop)">
</button>
In my angular application, I am using a button which will open a popover. But I want it to be a tag or something other than a button because the button will be activated when we press space or enter keys which I don't want. The code should be like this:
<i class="fa fa-caret-down font-size-18px" style="border: none"
#pop="bs-popover"
[popover]="fil"
placement="bottom right"
[adaptivePosition]="true"
[outsideClick]="true"
(keydown)="keydownEvent($event,pop)">
</i>
But this will not trigger the keydown event. What might be the reason for it what are the alternatives? Thanks
I have this piece of code:
<button name='link' onclick="window.location.href = 'Text.html';"
style="cursor:pointer" class='Text' value='Text.html' title='Text'>Text</button>
On click it will take you to one of my sub-sites. I wanted it to open the link in a new tab so I tried putting target='_blank' in the button tag, but it didn`t work. If possible I would prefer to use HTML.
Thanks
What about using form
<form action="//example.com/Text.html" target="_blank">
<button type="submit">Text</button>
</form>
This can take to different site or any of your sub-site.
Replace button tag with a
Text
Edit: While the original answer works, it isn't in line with the W3C HTML5 specs. An alternative would be to edit the JavaScript in the onclick attribute to open the link in a new tab.
<button
onclick="window.open('Text.html', '_blank')"
name="link"
style="cursor: pointer"
class="Text"
value="Text.html"
title="Text"
>
Text
</button>
You could wrap an <a> tag around the button instead.
<a href="Text.html" target="_blank">
<button
name="link"
style="cursor: pointer"
class="Text"
value="Text.html"
title="Text"
>
Text
</button>
</a>
On top of my table that includes/shows a list of specific object, I put an add button, but actually it is not a button it is something like this, mixed of span, a and icon
<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2">
<a class="text-success" (click)="add()">
<mdb-icon fas icon="plus" size="2x"></mdb-icon>
</a>
</span>
.
.
.
</div>
So, when the add icon is hit, the new empty row is created at the end of the table to add/enter the new object data, during this time, from creating new row to hit the save button, I would like the add button be disabled, but I could not disable this icon.
Note I have already had this button in my login form and it works properly,
<button [disabled]="loading" class="btn btn-primary btn-block btn-signin">Sign In</button>
this login button will becoming disable during the credential check.
but I don't know how I can deal with this add icon
Thanks!
You can use *ngIf. I'm not sure whether it will work on the <mdb-icon> tag or the even the <a> anchor tag so maybe something like this:
<span *ngIf="someCondition" class="table-add float-right mb-3 mr-2">
<a class="text-success" (click)="add()">
<mdb-icon fas icon="plus" size="2x"></mdb-icon>
</a>
</span>
<span *ngIf="!someCondition" class="table-add float-right mb-3 mr-2">
<!-- whatever HTML you want to render instead, or nothing -->
</span>
The process should be the same as the login button, unfortunately to give you a proper answer I need your typescript code.
In the meantime make sure that the loading property you are using to disable the button is set to true on your add() method and set to false on your save method.
Thanks #Ben Hulan! Final code is something like this,
<div *ngIf="addButton">
<span class="table-add float-right mb-3 mr-2">
<a class="text-success" (click)="add()">
<mdb-icon fas icon="plus" size="2x"></mdb-icon>
</a>
</span>
</div>
<div *ngIf="!addButton">
<span class="table-add float-right mb-3 mr-2">
<a>
<mdb-icon fas icon="plus" size="2x"></mdb-icon>
</a>
</span>
</div>
I'm using the framework bootstrap 4 and I was wondering why is my button not re directing the user to another page?
<button type="button" a href="https://www.google.com" class="btn btn-outline-primary">Contact Us <i class="fas fa-envelope"></i></button>
Buttons are not links (and don't have a boolean a attribute).
If you want a link, use a link:
Contact Us <i class="fas fa-envelope"></i>
I am new to programming and just trying to get a simple button to link to google. However it seems every time I press it, it disappears. Any help would be great.
Below I have put my simple button using Boostrap, I just used the button and added an href to link to google with an i class of fa-edit,
<a href="https://www.google.se" class="btn btn-danger">
<i class="fa fa-edit fa-fw"></i>
google
</a>
Fiddle link
I'm sure it's a silly mistake, but any help would be great.
If you add the target attribute it will know to open in a new window I think that is why you are not having any luck making it work in your fiddle.
<a class="btn btn-danger" href="https://www.google.se/"
target="_blank"> <i class="fa fa-edit fa-fw"></i> google</a>