My code should be quite simple but I can't put the Sign in front of the button. it goes under it. I want the sign glyphicon on the right of the button with a small margin to it.
Any idea?
<div class="form-group">
<div class="input-group">
<input />
<span class="input-group-btn">
<button type="button">Validate</button>
</span>
</div>
<div>
<span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
</div>
</div>
You can use display: inline in CSS.
Although I recommend putting your CSS in an external stylesheet.
<div class="form-group">
<div class="input-group" style="display:inline;">
<input />
<span class="input-group-btn">
<button type="button">Validate</button>
</span>
</div>
<div style="display:inline;">
<span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
</div>
</div>
use this css
.input-group{
float:left;
margin-right:5px;
}
.input-group{
float:left;
margin-right:5px;
}
<div class="form-group">
<div class="input-group">
<input />
<span class="input-group-btn">
<button type="button">Validate</button>
</span>
</div>
<div>
<span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
</div>
</div>
Div goes on a new line
So, put the element on the same div
<div class="form-group">
<div class="input-group">
<input />
<span class="input-group-btn">
<button type="button">Validate</button>
</span>
<span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
</div>
</div>
Do not use
display: inline
It's a bad practice, a div should divide elements. Use the tag span instead if you want a container.
Just like this below
<div class="form-group disp-inline">
<span class="input-group">
<input />
<span class="input-group-btn">
<button type="button">Validate</button>
</span>
</span>
<span>
<span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
</span>
</div>
Please use that code sign will come right side of the button:
<div class="form-group">
<div class="input-group">
<input />
<span class="input-group-btn">
<button type="button">Validate</button>
<span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
</span>
</div>
<div>
</div>
</div>
And if you give any margin then please use the css for margin and add the class into it e.g:
<span class="margin-left-5"><i class="glyphicon glyphicon-ok-sign">sign</i></span>
.margin-left-5{
margin-left:5px;
}
Use below code:-
.icon-button{
display:inline-block;
vertical-align:middle;
margin-left:5px;
}
.input-group{
display:inline-block;
vertical-align:middle;
}
<div class="form-group">
<div class="input-group">
<input />
<span class="input-group-btn">
<button type="button">Validate</button>
</span>
</div>
<div class="icon-button">
<span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
</div>
</div>
Related
I would like to remove the space between <input> and <button>.
In the CSS, I tried with padding: input, button {padding : 0px}, but it didn't work.
<form action="search">
<div class="input-search">
<span class="input-icon">
<i class="fas fa-map-marker-alt"></i>
</span>
<input type="text" placeholder="Los Angeles" />
<button type="submit">
<strong>Search</strong>
</button>
</div>
</form>
margin-left: -1em; maybe?
Margin can have negative value...
button{
margin-left: -1em;
}
<form action="search">
<div class="input-search">
<span class="input-icon">
<i class="fas fa-map-marker-alt"></i>
</span>
<input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
</div>
</form>
You can add the input-search div style display:flex.
<form action="search">
<div class="input-search" style="display:flex;">
<span class="input-icon">
<i class="fas fa-map-marker-alt"></i>
</span>
<input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
</div>
</form>
I am new in html and I have a code where I would like to align the input tag and the button on the right sign on the same line. How can I do that?
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon">
<button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</span>
</div>
My jsfiddle : https://jsfiddle.net/DTcHh/17952/
You can also do it in this way...
<style>
.nopadding{
padding:0;
}
</style>
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon nopadding">
<button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</span>
</div>
</div>
</div>
</div>
Since you are using bootstrap you can just add pull-right in the input field and button both.
For example:
<input type="text" class="form-control pull-right" />
In button as well:
<button class="btn btn-del input-group-delete pull-right" data-tooltip="tooltip" >
While using addon in bootstrap if you define any element inside the addon span it will cluttered because in bootstrap the addon class have padding in css and that is way you button will not aligned in this case you can do it like this :
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon btn btn-del input-group-delete"> <i class="fa fa-trash-o"></i>
</span>
</div>
</div>
Okay try this
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group col-xs-9">
<input type="text" class="form-control" />
</div>
<button class="btn btn-del input-group-delete col-xs-3" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
</div>
I would like to align a spinner just to the right of the input box but it is going underneath:
<form>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" placeholder="Search" ng-model="searchTerm" ng-change="FetchNearby(searchTerm)">
</div>
<span><img alt="Logo" src="/Content/Images/ajax-loader.gif" /></span>
</div>
</form>
something like this?
https://jsfiddle.net/1e0v352r/
i've added a class to your span and moved it inside of the .input-group
<form>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" placeholder="Search" ng-model="searchTerm" ng-change="FetchNearby(searchTerm)">
<span class="logo_right"><img alt="Logo" src="/Content/Images/ajax-loader.gif" /></span>
</div>
</div>
</form>
and added some css to position it
.logo_right {
position: absolute;
right: 0;
top: 0;
z-index: 5;
}
I am having trouble getting two components to align in using the <div display='table-cell'>. The first component is being displayed with a gap at the top. I want them to be displayed so that they are aligned.
Here's the JsFiddle: http://jsfiddle.net/66s7x5fr/
Here's the HTML:
<div class="form-group modifierColumn">
<div class="cell">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="cell">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>
</div>
Here's the CSS:
.modifierColumn .cell:not(:last-child) {
padding-right: 5px;
}
.cell {
display: table-cell;
}
Similar to nocarrier's response:
.cell {
vertical-align: top;
display: table-cell;
}
Try
.cell {
vertical-align: bottom;
display: table-cell;
}
Somewhat obscure rule. Baffles many. Check Understanding vertical align
Your problem is the the top-padding that the class cell has. Try to use a col-md-x to be more responsive.
<div class="form-group modifierColumn" tabindex="0">
<div class="col-xs-3">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="col-xs-4">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>
See http://jsfiddle.net/7T9r9/ as an example.
<li>
<span class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" class="checkbox"/>
</span>
<input type="text" class="form-control input-append" value="test">
<span class="input-group-addon"></span>
</div>
</div>
<div class="col-md-9">
<div class="input-group">
<input type="text" class="form-control"
value="test">
<span class="input-group-addon">
<a href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</span>
</div>
</div>
</span>
</li>
What I would like to achieve is to have the first input width fitting the text inside of it (a fixed width would do as well I guess).
The second input should occupy the rest of the row and all the elements should be on the same line.
Is there a way to do this?
I'm guessing your fiddle is an example of the effect that you want, but you don't want to use different columns for it.
Dynamic width Text input based on value length is not possible (unless recently via some css goddess like Verou finding something). So assuming fixed width on that guy.
The other guy then can take advantage of the other fixed width to do a margin etc.
Something like this:
HTML
<span class="row">
<div class="test1 input-group">
<span class="input-group-addon">
<input type="checkbox" class="checkbox"/>
</span>
<input type="text" class="form-control input-append" value="test">
<span class="input-group-addon"></span>
</div>
<div class="test2 input-group">
<input type="text" class="form-control"
value="test">
<span class="input-group-addon">
<a href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</span>
</div>
</span>
CSS
.row {
position:relative;
}
.test1 {
width:200px
}
.test2 {
position:absolute !important;
top:20px;
margin-left:200px;
}