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>
Related
I want to change my normal checkbox looks to as shown below. Please help me with the same.
Image (5) shows not active checkbox and (6) shows checked checkbox.
Current code being used is as below:
<div class="x-form-cb-li x-form-cb-li-h" style="padding-bottom: 5px">
<input type="checkbox" class="custom-checkbox x-form-field" id="optIn-Y" name="optIn" value="Y" style="float:left"><label class="x-form-cb-label" for="optIn-Y">Yes, please send me interesting offers</label>
</div>
To add to the above query. How can I make 2 such checkboxes to behave as radio buttons i.e. if the second one is clicked the first one is no longer checked and vice versa.
It shows how you can put a checkbox as a radio button:
$('.select-option').click(function(){
$(this).find('i').toggle();
var checked=$(this).find('input').prop('checked');
$(this).find('input').prop('checked',!checked);
if(!checked){
$(this).siblings().each(function(){
$(this).find('input').prop('checked',false);
$(this).find('i').first().show();
$(this).find('i').last().hide();
});
}
});
.select-option{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='select-group'>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
</div>
Try this and thinks.
$('.select-option').click(function(){
$(this).find('i').toggle();
$(this).find('input').prop('checked',!$(this).find('input').prop('checked'));
});
.select-option{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
I am trying to align the search button right next to the search box however button seems to be below. This is what I got:
<form action="{linkto page="search.php"}" method="get" id="searchFormTest">
<input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}" placeholder="Suchbegriff oder Bildnummer">
<div style="display: inline;">
<button type="submit" value="Submit">
<i style="font-size: 40px;" class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</form>
Float your search input to the left, float your submit button to the left. Ready.
input[type="search"],
button {
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div style="display: inline;">
<input type="text"/>
<span> <button type="submit" value="Submit">
<i style="font-size: 20px;" class="fa fa-search" aria-hidden="true"></i></span>
</button>
</div>
this should work to have the icon right next to the search box.
You code works just fine in jsfiddle. I think you should look into css styles which are being inherited by the button.
<form method="get" id="searchFormTest">
<input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" placeholder="Suchbegriff oder Bildnummer">
<div style="display: inline;">
<button type="submit" value="Submit">
<i style="font-size: 15px;" class="fa fa-search" aria-hidden="true">Search</i>
</button>
</div>
</form>
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.
I need the following controls in one line and aligned right. I need the two icons appear inside the textbox at the right corner. And also both the controls to be aligned right.
Here is the Plunker
<div class="col-md-12">
<div class="col-md-6">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
<span><i class="glyphicon glyphicon-remove" ></i></span>
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
</div>
<div class="col-md-6" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label.Label}}
</a>
</li>
</ul>
</div>
</div>
Bootstrap styles .form-control input elements as BLOCK (they are usually inline).
If you restyle that specific input element to inline-block and reduce the width a bit (unsure why that was necessary - perhaps only for SO snippet environment), you will be able to use margin-left on the span elements to walk them over a bit.
span.a1{margin-left:-50px;border:1px solid green;}
span.a2{border:1px solid red;}
#txtDateRange{display:inline-block;width:99.3%;}
div.a1 {display:inline-block;margin-left:-50px;border:1px solid green;}
div.a2 {display:inline-block; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p> </p>
<div class="col-md-12">
<div class="col-md-6">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
<span class="a1"><i class="glyphicon glyphicon-remove" ></i></span>
<span class="a2 xform-control-feedback"><i class="glyphicon glyphicon-calendar xfa xfa-calendar"></i></span>
</div>
<div class="col-md-6" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label.Label}}
</a>
</li>
</ul>
</div>
</div>
You may do it like this:
.col-md-6{
float: right;
}
.wrapper{
overflow: hidden;
}
#txtDateRange{
width: 100%;
}
<div class="col-md-12">
<div class="col-md-6">
<span><i class="glyphicon glyphicon-remove" ></i></span>
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
</div>
<div class="wrapper">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
</div>
</div>
I am trying to place a glyphicon inside a button control but the button text and glyphicon don't come in the same line. The button text comes slightly below and is not parallel with the glyphicon
<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
<span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
My Button Text
</button>
there should be vertical-align: middle; to glyphicon span where you have placed inline CSS
<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
<span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px; vertical-align: middle;" aria-hidden="true"></span>
My Button Text
</button>
That's it :)
You can use bootstrap grid system and css like following:
<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
<div class="col-md-2">
<span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
</div>
<div class="col-md-10" style="padding-top:5px; margin-left: -4px">
My Button Text
</div>
</button>