I have this button and I want to make it calls methods when I click on "Select" and another method when I click "Change":
<button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default">
<span *ngIf="isNullOrUndefined(class?.classForeignId)">Select</span>
<span *ngIf="!isNullOrUndefined(class?.classForeignId)">Change</span>
</button>
i have tried to put (click)="method()", but did not work. I'm so confused to what can I do. Please help
(click)="method()" is indeed the way to go.
<button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default">
<span (click)="selectMethod()" *ngIf="isNullOrUndefined(class?.classForeignId)">Select </span>
<span (click)="changeMethod()" *ngIf="!isNullOrUndefined(class?.classForeignId)">Change </span>
</button>
Demo
Create 2 different buttons instead of 2 different spans in button and call the different methods in click on both elements.
<button type="button" class="btn btn-default" *ngIf="!edit && isNullOrUndefined(class?.classForeignId)" class="btn btn-default" (click)="method1()">
Select
</button>
<button type="button" class="btn btn-default" *ngIf="!edit && !isNullOrUndefined(class?.classForeignId)" class="btn btn-default" (click)="method2()">
Change
</button>
Related
First of all I am a noob of CSS. Also I am using bootstrap framework. I have a question. Recently I created a set of buttons and they are viewable on mobile devices too.
Desktop view:
https://i.stack.imgur.com/C8JCp.png
Mobile view:
https://i.stack.imgur.com/IBPP0.png
So what I want to do is I need to give some small space between rows on mobile device view.
Like this: https://i.stack.imgur.com/fU55k.png
My Code:
<?php
include "header.php";
include "navbar.php";
?>
<div style="text-align: center;">
<button type="button" class="btn btn-info">January</button>
<button type="button" class="btn btn-info">February</button>
<button type="button" class="btn btn-info">March</button>
<button type="button" class="btn btn-info">April</button>
<button type="button" class="btn btn-info">May</button>
<button type="button" class="btn btn-info">June</button>
<button type="button" class="btn btn-info">July</button>
<button type="button" class="btn btn-info">August</button>
<button type="button" class="btn btn-info">September</button>
<button type="button" class="btn btn-info">October</button>
<button type="button" class="btn btn-info">November</button>
<button type="button" class="btn btn-info">December</button>
</div>
<?php
include "footer.php"
?>
Anyone help for this? Thanks in Advance. Also sorry for my bad English.
So for that you have to set bottom margin of 5px for all buttons like below
.btn-Margin{
margin-bottom : 5px
}
<div style="text-align: center;">
<button type="button" class="btn btn-info btn-Margin">January</button>
<button type="button" class="btn btn-info btn-Margin">February</button>
<button type="button" class="btn btn-info btn-Margin">March</button>
<button type="button" class="btn btn-info btn-Margin">April</button>
<button type="button" class="btn btn-info btn-Margin">May</button>
<button type="button" class="btn btn-info btn-Margin">June</button>
<button type="button" class="btn btn-info btn-Margin">July</button>
<button type="button" class="btn btn-info btn-Margin">August</button>
<button type="button" class="btn btn-info btn-Margin">September</button>
<button type="button" class="btn btn-info btn-Margin">October</button>
<button type="button" class="btn btn-info btn-Margin">November</button>
<button type="button" class="btn btn-info btn-Margin">December</button>
</div>
Say I have this snipped of HTML code:
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
I would like any item inside the outer div have an horizontal margin of 3.
The only way I know is to add me-3 to the class of each item (the button group and the two other buttons). But I have to remember to add this for any other item I'm going to add.
I tried to add this to the outer div, but of course it refers to the next sibling div (if any).
Is there a way to set this margin in the outer div, but to be applied to the nested elements?
JS Solution
Iterate over all of the outer div children, and setAttribute class `me-3` to each one:
let outerDiv = document.querySelector(".btn-group")
for (let i = 0; i < outerDiv.childNodes.length; i++) {
console.log(outerDiv.childNodes[i])
if (i % 2 == 1) {
outerDiv.childNodes[i].setAttribute("class", "me-3");
}
}
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
CSS Solution
Similar to the JS solution, use `>` to iterate over all the children of `.btn-group`:
.btn-group > button {
margin-left: 3px;
margin-right: 3px;
}
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
I personally recommend the CSS solution as you can change the margin left and right to your liking.
I want to create a clickable button which send me the user at the form section(at same page).
<button type="button" class="btn btn-primary btn-sm">
send me to the form
</button>
...
<form id="form1">
<div class="form-group">
...
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
But I didn't find any solution.
Is there any why to do it without rely on jquery/JS? If not then how to target the form? Here is my codepen in case you need it.
nest your button in the link tag this way:
<a href="#form-1">
<button type="button" class="btn btn-primary btn-sm">
send me to the form
</button>
I have a problem with three buttons on my site.
I would like to have some space between those buttons.
Is it possible to do this, without using inline styling?
Perhaps bootstrap has some classes for this?
I know I can simply do it with:
style='margin-right:5px;'
or write custom class with this property.
I am just wondering if bootstrap has some classes for this?
Here is example.
Problem is with this three buttons:
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
Try to put them inside btn-toolbar or some other container.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
Yes you have to wrap them
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
EDITED CODEPEN
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
d-flex justify-content-between
<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
<button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
Reset
</div>
Will work like magic.
Bootstrap button group make them always in one line, always align horizontally.
When I resize window button comes down vertically.
I am looking for a solution where button comes always in one line no matter what.
I have applied style="white-space:nowrap;" on parent div but it doesn't work.
If possible try to use only bootstrap's inbuilt css classes.
Please answer by keeping current HTML structure as it is. Because that's how it is implemented in mine project.
This is simplest implementation of bootstrap button group. See PLUNKER
CODE
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal">
<div class="form-group" style="white-space:nowrap;">
<div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
11111
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
</div>
</div>
</div>
</div>
You need to override the float: left; as well as add white-space: nowrap; to the parent. So in your css:
.btn-group {
white-space: nowrap;
}
.btn.btn-primary,
.btn.btn-success {
float: none;
}
plunker: https://plnkr.co/edit/lRWyHeeN78d2sSNaXGSZ?p=preview
Although, I would recommend adding a specific class to the btn-group/btn-primary/btn-success because overriding bootstraps styling instead of just adding a custom class is a bad practice.
For example:
HTML:
<div class="btn-group custom-class">
<button type="button" class="btn btn-primary custom-class">
<button type="button" class="btn btn-success custom-class">
CSS:
.btn-group.custom-class{...}
.btn.btn-primary.custom-class,
.btn.btn-success.custom-class {...}
https://plnkr.co/edit/nAZD6Hssgnep37fXU9vb?p=preview
Try display:inline-flex on parent instead on display:inline-block on btn-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal" style="">
<div class="form-group" style="white-space:nowrap;">
<div>
<div class="btn-group" style="display:inline-flex;">
<button type="button" class="btn btn-primary">
11111
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
</div>
</div>
</div>
</div>