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>
Related
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>
Hi I trying to do the following for getting the search button inside the input field with class input-ol, but its not working. I am writing the following code.
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol" name="query" placeholder="Ex: cars, watches, exercise... "/>
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary" type="button" aria-label="Search">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
The output looks like this
I think you need to add the class form-control to your input element to get it to work.
.input-group input.input-ol {
border-radius: 50px;
}
button.rounded {
border-radius: 10px 50px 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-6">
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol form-control" name="query" placeholder="Ex: cars, watches, exercise... " />
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary btn-primary rounded" type="button" aria-label="Search">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</div>
</div>
I also removed the class fa-2x from the icon element just to make the snippet work, but if you have additional styles that make the larger button work with your input field you probably won't have to remove that class.
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 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;
}