I was trying to add all possible ways but without luck, this code is bit to hard for me, could any body help me.
How to add glyphicon glyphicon-search to <input style="width:10px" type="submit" class="btn btn-nomest" onclick="$('input:not(:submit,:button), select',this.form).val('');"
If I make another span its not working
Use <button> instead of <input type="submit">
<button
style="width:10px"
type="submit"
class="btn btn-nomest"
onclick="$('input:not(:submit,:button), select',this.form).val('');">
<i class="glyphicon glyphicon-search"></i>
</button>
Related
I'm having trouble getting a glyphicon-search button to line up in bootstrap.
This is not a unique problem, I found this question that asks a similar thing, except the accepted and celebrated answer isn't working for me. Just like the answer, I have a div input group wrapper that should line up the field, but it isn't working, as you can see in my jsfiddle:
http://jsfiddle.net/pk84s94t/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button>
</span>
<input type="text" class="form-control input-sm">
</div>
http://jsfiddle.net/kv8n7n5g/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
You had the glyphicon classes inside the button tag.
If that doesn't work you may have to change the line-height of the icon to 1. I was using ionicons and the 1.4... line-height was throwing everything off.
That's interesting. I've never tried using a button with an input group like that, and I'm not sure why that behavior is occuring. Seems to be an easy fix though.
I added top:0 to the existing rule .input-group-btn>.btn which already had position: relative; ...
http://jsfiddle.net/pk84s94t/1/
EDIT
While this does fix the behavior, Rachel S's answer is a better solution as it's not changing CSS rules, but using proper HTML within bootstrap to fix the problem.
The problem you are having is due to the glyphicon button default size in bootstrap. But if you put some text in the button it aligns perfectly as now the button for the text is given more priority than the glyphicon's default. For the text I used  . It works fine now.
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> 
</button>
</span>
</div>
I have the following HTML. I want the "Get Geotag" button to be right aligned and the text to be anywhere before/to the left of the button. However, currently I cannot figure out a way to get the buttons aligned properly and to continue functioning (the text for the input is based off of getLoc()). Any help would be appreciated!
<button class="button button-positive button-clear pull-right" ng-click="getLoc()" readonly>
Get Geotag
</button>
<input type="text" value="{{geoString}}">
There is no related CSS.
I tried this:
Get Geotag
which aligns correctly but then the location functionality goes away. I also tried to use things like float: right and right-align to no avail.
<div class="center">
<button class="button button-positive button-clear pull-right" ng-click="getLoc()" readonly>
Get Geotag
</button>
<input type="text" value="{{geoString}}"></div>
Two Options:
1.
.center{display:inline-block;}
2.
.center{display:flex;
flex-direction:row;
justify-content:space-around; /* you could also use justify-content:space-between; *\
}
My code had a typing mistake. Fixed it
It is difficult to say without your css. But I'm trying to help you.
CSS:
.my_css{display:inline-block}
HTML:
<button class="button button-positive button-clear pull-right my_css" ng-click="getLoc()" readonly>
Get Geotag
</button>
<input type="text" value="{{geoString}}">
I'm trying to add an <input type="reset"> with a Font Awesome icon.
I can achieve this with a hyperlink or button but if I go down that route I need to use jQuery/JS to clear the form, which I'm trying to avoid for the time being.
I'm curious to whether it's possible to achieve the same results. Please see the JSFiddle to see what I mean.
Input Reset:
<input type="reset" class="btn btn-warning" value=""><i class="fa fa-times"></i> Clear</input>
<br/>
<br/>
Button:
<button class="btn btn-warning"><i class="fa fa-times"></i> Clear</button>
<br/>
<br/>
Anchor:
<i class="fa fa-times"></i> Clear
If there's no other way I will implement a jQuery solution.
<input> is self-closing tag, it's not allowed to have any other elements inside it.
Here are all the 3 possible options of doing it as inline icon.
JsFiddle demo
1. wrap the <i> and <input> button into a <span> tag, with some custom styles.
<span class="btn btn-warning">
<i class="fa fa-times"></i> <input type="reset" value="Clear"/>
</span>
span > i {
color: white;
}
span > input {
background: none;
color: white;
padding: 0;
border: 0;
}
2. use <button type="reset"> - recommended.
<button class="btn btn-warning" type="reset">
<i class="fa fa-times"></i> Clear
</button>
3. use <a> anchor tag + javascript
<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
<i class="fa fa-times"></i> Clear
</a>
https://jsfiddle.net/a6s58Luj/3/
<input type="reset" class="NEWCLASS btn btn-warning" value=" Clear" />
By adding value=" Clear" you can add the X icon. f00d is the icon HEX/whatever, which I got from inspecting the elements (checking the ::before's content). You might have to look into some additional styling, but it will work. Just remember to set the font.
If you need this inside a form , You cant make type="reset"
The best methoad i would say is, wrap the input element with label and apply all css to label. so any click on label will trigger input element also.
<label classname="all css of your button">
<input type="submit" value="submit">
<i class="fa fa-times"></i>
</label>
I use input-group in modal dialog. And the button is 1px less then other elements. How can I fix it, more then less why I have this bug? I use Bootstrap 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="buttons input-group col-sm-offset-1 col-sm-9">
<input type="number" min="1" value="1" class="form-control" />
<span class="input-group-addon">ks</span>
<span class="input-group-btn">
<button type="button" class="btn btn-default glyphicon glyphicon-remove color-red"/>
</span>
</div>
For me, the bug was because of a rounding error.
there's this style rule
.btn {
line-height: 1.42857;
}
which should be
.btn {
line-height: 1.42857143;
}
Turns out importing bootstrap within other SASS files resulted in a loss of precision. The SASS compile process needed the flag --precision 8 to work correctly.
For you, though, as noted in another answer, you just need to put your icon in another tag.
<span class="input-group-btn">
<button type="button" class="btn btn-default color-red">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
I encountered this today, and with a bit of googling and experimentation, it seems the correct way to use a glyphicon is to always use the icon class on it's own span, and not to combine it with other classes / components.
If your example; you would do the following:
<span class="input-group-btn">
<button type="button" class="btn btn-default color-red">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
With this there is no need to to any style changes.
It's caused by using a glyphicon on the button, and seems to be a bug with bootstrap. Use
.input-group-btn>.glyphicon {margin-top: -1px;}
to fix it.
http://fiddle.jshell.net/85m5mwsg/2/
Remove top of .glyphicon
http://jsbin.com/dufisukefe/3/edit
.input-group-btn .glyphicon
{
top :0px
}
I am looking to obtain the same style for both #html.ActionLink & a input submot control (both buttons) on a form. I basically want the input control to look the same the ActionLink control.
<div class="btn btn-success">
#Html.ActionLink("RSVP Now", "RsvpForm")
</div>
<div class="btn btn-success">
<input type="submit" value="Update RSVP" />
</div>
I want the bottom button to look the above button
(btn btn-sucess is from the bootstrap library)
<div>
<input class="btn btn-success" type="submit" value="Update RSVP" />
</div>
Provide the class inside the HTML Attributes parameter of the Html.ActionLink Method.
<div>
#Html.ActionLink("RSVP Now", "RsvpForm", new{#class="btn btn-success"})
</div>