HTML:
<a id="foo" href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
<a id="bar" href="#" class="btn btn-default btn-lg" role="button">Link</a>
jQuery:
$("#foo,#bar").click(function(e){
e.preventDefault();
alert('click');
});
The alert appears when clicking #bar, but not when clicking #foo. How can I fix this?
Fiddle: http://jsfiddle.net/VVw8S/
In Bootstrap you can read this code:
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
}
If you want to have a disabled button which allowed click events, just overwrite this CSS with pointer-events: inherit;. Or simply remove disabled in the class of your first link.
Related
I was trying to use tooltip and show it using jquery on my jquery datatable the problem is the tooltip is not showing.
here's my code:
render: function (data, type, row, meta) {
var total = row.success + row.error;
if (row.isConsumed == true) {
if (total == 100) {
return `<button class="btn btn-sm text-light order-completion" id="order-completion">CONSMUPTIONS</button>`
} else {
return ` <div class="btn-group" role="group" aria-label="GroupButton">
<button class="btn btn-sm text-light order-completion" disabled>CONSUMPTION</button>
<button type="button" class="btn btn-secondary btn-sm"
data-bs-custom-class="custom-tooltip"
data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top"
data-bs-title="Some title here">
<i class="fa-solid fa-circle-info"></i>
</button>
</div>
`;
//return `<button class="btn btn-sm text-light order-completion" disabled>CONSUMPTION</button>`
}
} else {
return `<button class="btn btn-sm text-light order-completion" disabled>CONSUMPTION</button>`
}
},
Make sure that you have initialized the tooltip feature on your page, by calling:
$('[data-bs-toggle="tooltip"]').tooltip()
after the datatable has been created.
If still doesn't work, check if the element that you want to show the tooltip on is visible when the tooltip is being initialized. If the element is hidden, the tooltip will not be displayed.
And finally, check if the element that you want to show the tooltip on is not inside a container with the property of overflow: hidden or pointer-events: none, as this will also hide the tooltip.
I have a dropdown that at the moment exists of one button. I would like this button to be disabled and that the color changes when it is disabled. I created this behaviour already with the code underneath.
Can't this be written cleaner? Because now I actually create 2 buttons but only one is seen..
I have tried this but I get stuck when adding the css background-color in the button code.
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<div *ngIf="checkIfValidVersion()">
<button class="dropdown-item js-swal-confirm" (click)="createMajors()">Create major version</button>
</div>
<div *ngIf="!checkIfValidVersion()">
<button [disabled]="!checkIfValidVersion()" style = "background-color:grey; color:black" class="dropdown-item js-swal-confirm">Create major version</button>
</div>
</div>
</div>
</div>
Ok, what you have to do is write a styling class for your button that will take effect if the button is disabled
Something similar to this will do the trick:
.my-button:disabled {
background-color: grey;
color: black
}
and your HTML will look like this:
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<button class="dropdown-item js-swal-confirm my-button" (click)="createMajors()"
[disabled]="!checkIfValidVersion()">Create major version</button>
</div>
</div>
</div>
Related topic here
<button class="dropdown-item js-swal-confirm" [class.disabledStyle] ="!checkIfValidVersion()"> Create major version </button>
The above code will add a class name "disabledStyle" to the existing class if the function returns true.
disabledStyle {
background: grey;
}
You are duplicating the code. You just require one line which is already there. Based on condition it will put disable attribute in your button. Do not put css code at button level.
<button [disabled]="!checkIfValidVersion()" class="dropdown-item js-swal-confirm">Create major version</button>
Now put css at button level for disable scenario:
button[disabled=disabled], button:disabled {
background-color:grey;
color:black;}
This is most cleaner way.
This my html code:
<a href="#" id="continueId" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next">
<span>
<span (click)="onContinue()">
continue
</span>
<i class="la la-arrow-right"> </i>
</span>
</a>
This onContinue() method:
onContinue(){
if (!this.testForm.valid) {
//here where I want to enable or disable data-wizard-action="next"
}
}
What I want is to enable or disable data-wizard-action="next" from my Angular typescript code in "onContinue()" method. If my form is not valid, so I'll disable the click of next button else, I'll enable the click. The problem here, that the continue click is attached to the data-wizard-action="next" attribute.
You can use "Angularify" like this
<div .. [attr.data-wizard-action]="next">
and
onContinue(){
this.next=!this.next
...
No more strict way to disable link button. I think you use css for disabling the link button conditionaly and then prevent the click of link button.
Try to use
<a (click)="onContinue($event)" href="javascript:void(0)" id="continueId" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next" [ngClass]="{'disabled-anchor': 'yourCondition'}">
<span>
<span>
continue
</span>
<i class="la la-arrow-right"> </i>
</span>
</a>
CSS
.disabled-anchor {
pointer-events: none;
cursor: default;
opacity: 0.6;
text-decoration: none;
color: black;
}
Component
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 5';
onContinue(event: any) {
event.preventDefault();
event.stopPropagation();
if (!this.testForm.valid) {
//here where I want to enable or disable data-wizard-action="next"
}
}
}
Use *ngIf to show or hide a html element.
<div *ngIf="this.testForm.valid; then continueIdWith; else continueIdWithout"></div>
<ng-template #continueIdWith">
<a href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next">
</ng-template>
<ng-template #continueIdWithout">
<a href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon">
</ng-template>
I want to change bootstrap glyphicon color to "yellow" because current color is showing in white that looks like Delete button. How can i change color of glyphicon-folder-close or use any other glyphicon that display folder image better ?
main.html
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close"></span></button>
You can also change the icon/text by adding to the class "text-success" for green, "text-danger" for red etc. This will change the color of the icon itself.
<span class="glyphicon glyphicon-usd text-success"></span>
Also this has been answered here.
Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
Use color
<button type="button"
class="btn btn-info btn-lg" ng-click="serverFiles()"
style="margin-left: 10px; color:#FF0000;">
<span class="glyphicon glyphicon-folder-close"></span></button>
But remember that it is desirable to avoid the use of inline style is better use classes or references based on external css configuration items
<button type="button"
class="btn btn-info btn-lg mybtn-blue" ng-click="serverFiles()"
style="margin-left: 10px;">
<span class="glyphicon glyphicon-folder-close"></span></button>
edn for external css
.mybtn-blue {
color: blue;
}
Use the following HTML code
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close yellow"></span></button>
And the css code
.yellow {
color: #FFCA28;
}
here is the demo http://jsfiddle.net/S3R23/1217/
You can change color of the icon by directly specifying color name, however this will only apply to targeted icon.
To change the color, do this:
<span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span>
Just edit the span tag in your code to the one above, making your code to look like this:
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span></button>
You can change glyphicon color to any value. see below given example
<span aria-hidden="true" class="glyphicon form-control-feedback glyphicon-ok"></span>
//css
.glyphicon.form-control-feedback.glyphicon-ok{
color: #20032d !important;
}
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here