I have this HTML code:
<label style="padding: 0px 0px!important; text-align:center">
<span style="color: gray">Some Text</span>
<button onclick='alert("Hello!")' style="cursor: pointer;">
<i class="glyphicon glyphicon-pushpin btn-lg" aria-hidden="true"></i> </button>
</label>
Here is JSFiddle.
In label control I declared button.Button is clicked when I click in any area in the label.How to make button clicked only when I click on the button it self?
unwrap label to button like
<label style="padding: 0px 0px!important; text-align:center">
<span style="color: gray">Some Text</span>
</label>
<button onclick='alert("Hello!")' style="cursor: pointer;">
<i class="glyphicon glyphicon-pushpin btn-lg" aria-hidden="true"></i>
</button>
https://jsfiddle.net/xzgqLhpd/2/
Your solution is like so:
<label style="padding: 0px 0px!important; text-align:center">
<span style="color: gray">Some Text</span>
</label>
<button onclick='alert("Hello!")' style="cursor: pointer;">
<i class="glyphicon glyphicon-pushpin btn-lg" aria-hidden="true"></i>
</button>
Just place the button outside the label.
add onclick function on wrapper element with return false;
<label onclick="return false;">
<span style="color: gray">Some Text</span>
<button onclick='alert("Hello!");' style="cursor: pointer;">
MY BUTTON
</button>
</label>
I'm trying to develop a Integer Number Field. I've got it working but the styling is somewhat creating a problem. I'm using Glyphicons Plus and Minus to act as increment and decrement functionalities and input text field to display the Integer number.
I'm not able to adjust the Minus Glyphicon to the height of the div.
The working code: http://jsfiddle.net/nvarun123/fv4jxo4t/26/
HTML code:
<div>
<a>
<button (click)="decrement()" class="btn btn-primary">
<span><i class="glyphicon glyphicon-minus" ></i></span>
</button>
</a>
<input type="text" style="width:45%;" [(ngModel)]="count">
<a>
<button (click)="increment()" class="btn btn-primary" style="float: right;">
<span><i class="glyphicon glyphicon-plus" ></i></span>
</button>
</a>
</div>
CSS code:
div {
position:relative;
border: 1px solid #CACEDB;
width: 162px;
height:38px;
overflow: hidden;
white-space: nowrap;
border-radius:3px;
}
input{
text-align: center;
height:100%;
width:100%;
border:none;
}
input:focus{
outline: none;
}
button
{
-webkit-appearance: none;
outline: none;
height:100%;
border:none;
vertical-align:middle;
}
button:active {
background-color: #015191;
}
Your minus button needs a float:left :
<div>
<a>
<button (click)="decrement()" class="btn btn-primary" style="float: left;">
<span><i class="glyphicon glyphicon-minus" ></i></span>
</button>
</a>
<input type="text" style="width:45%;" [(ngModel)]="count">
<a>
<button (click)="increment()" class="btn btn-primary" style="float: right;">
<span><i class="glyphicon glyphicon-plus" ></i></span>
</button>
</a>
</div>
As you are already using Bootstrap you can make use of the input-group class alongside input-group-btn. Reference the CodePen link below:
http://codepen.io/rkieru/pen/JKOyom
<div class="input-group">
<span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-minus"></i></button></span>
<input type="text" class="form-control" placeholder="Integer">
<span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-plus"></i></button></span>
</div>
I would also recommend not wrapping your <button> in an <a> tag. The <button> can function on a JS event on its own and the code is cleaner.
Image
So as you can see in the image above, the History button is not affected by the black outlines like the other buttons is. Apparently the button is not in the class but as you can see in the code below it is.
<div class="container" id="main-container">
<div class="row main-row">
<div class="col-sm-3">
<div style="padding-top: 10px; margin-bottom: 20px;">
<div id="topleft-menu">Menu</div>
<div class="topleft-link-wrapper logout" style="display: none;">
<button class="topleft-link btn btn-primary btn-block" id="change-trade-url-btn"><span class="glyphicon glyphicon-pencil"></span> Change your trade URL</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-info btn-block" data-toggle="modal" data-target="#about-modal"><span class="glyphicon glyphicon-list-alt"></span> About/How it works</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-warning btn-block" id="support-btn"><span class="glyphicon glyphicon-question-sign"></span> Support</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-default btn-block" id="donate-btn"><span class="glyphicon glyphicon-usd"></span> Donate</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-success btn-block" id="history-btn"><span class="glyphicon glyphicon-list"></span> History</button>
</div>
I don't know why this problem occurs.
Also if you wanna inspect the site visit; www.csgoxd.net
The other elements have the css declaration:
.topleft-link-wrapper:not(:last-child)
So your last child element will not have the border declarations.
This is my button group that using bootstrap template:
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
<label class="btn btn-default">%100</label>
<button type="button" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
And it looks like this:
Button groups are not same alignment. I want fixed label size. This is an ugly appearence.
Try creating a css class to set the width of the text content:
.btn-group label{
width: 100px;//or any other size
}
I want to give spacing between buttons is there a way to give spacing using bootstrap so that they will be consistent for different screen resolutions.
I tried using margin-left But is it the correct way to do this.??
Here is the demo
HTML:
<div class="btn-toolbar text-center well">
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
</button>
</div>
CSS:
.margin-left{
margin-left: 80px !important;
}
You can achieved by use bootstrap Spacing. Bootstrap Spacing includes a wide range of shorthand responsive margin and padding. In below example mr-1 set the margin or padding to $spacer * .25.
Example:
<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>
You can read more at Bootstrap Spacing.
HTML:
<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">
CSS:
.btn-space {
margin-right: 5px;
}
Wrap your buttons in a div with class='col-xs-3' (for example).
Add class="btn-block" to your buttons.
This will provide permanent spacing.
It varies according to bootstrap version
If you are using
Bootsrap 4
mr-1
for more refer the official Bootsrap 4 margin-and-padding link
Bootstrap 5
me-1
for more refer the official Bootsrap 5 margin-and-padding link
If you want use margin, remove the class on every button and use :last-child CSS selector.
Html :
<div class="btn-toolbar text-center well">
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
</button>
</div>
Css :
.btn-toolbar .btn{
margin-right: 5px;
}
.btn-toolbar .btn:last-child{
margin-right: 0;
}
I am pretty bad at html but I used between the buttons and it worked well.
Depends on how much space you want. I'm not sure I agree with the logic of adding a "col-XX-1" in between each one, because you are then defining an entire "column" in between each one.
If you just want "a little spacing" in between each button, I like to add padding to the encompassing row. That way, I can still use all 12 columns, while including a "space" in between each button.
Bootply: http://www.bootply.com/ugeXrxpPvD
Use btn-primary-spacing class for all buttons remove margin-left class
Example :
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>
CSS will be like :
.btn-primary-spacing
{
margin-right: 5px;
margin-bottom: 5px !important;
}
You can use built-in spacing from Bootstrap so no need for additional CSS there. This is for Bootstrap 4.
The original code is mostly there, but you need btn-groups around each button. In Bootstrap 3 you can use a btn-toolbar and a btn-group to get the job done; I haven't done BS4 but it has similar constructs.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button class="btn btn-default">Button 1</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-default">Button 2</button>
</div>
</div>
Adding margins to a button makes it wider so that les buttons fit in the grid system. If only a visual effect is important, then give the button a white border with [style="margin:0px; border:solid white;"] This leaves the button width unaffected.
using bootstrap you can add <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div> between buttons.