How to place search icon inside text box
<input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span>
working fiddle
Hope this code snippet will help you.
<div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
CSS:
input {
border: 0;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
input:focus{
outline: 0;
}
.input-placeholder{
background-color: #eee;
display: inline-block;
padding: 10px;
}
HTML:
<div class="input-placeholder">
<input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span>
</div>
Here's the fiddle https://jsfiddle.net/6d463wo1/1/
As per your code it looks like you are using Bootstrap, in bootstrap it provide another method like input-group. You can use following html code for this
<div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
<div class="input-group">
<input class="form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><div class="input-group-addon"><span class="fa fa-search form-control-feedback"></span></div>
</div>
</div>
There's a bootstrap way for this. Use the .input-group-addon class.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search By RoleName" aria-describedby="basic-addon2">
<span class="input-group-addon fa fa-search" id="basic-addon2"></span>
</div>
In order to place the button inline with the input field, add this css:
.input-group .fa-search{
display: table-cell;
}
Please try it in the fiddle here
You can use this if you want
<input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName 🔍"/>
<!DOCTYPE ht`enter code here`ml>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
.club input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid black;
border-right: 0px solid black;
float: left;
width: 90%;
}
.club button {
float: left;
width: 10%;
padding: 10px;
background:white;
color: black;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="club">
<input type="text" placeholder="Search.." name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
<div>
</body>
</html>
code on fiddle
Related
I'm new to web designing. PLS help me to create this input fields responsive and also how I put margins in all around like it's in middle(I want get those columns in the middle of the page).
<!DOCTYPE html>
<html>
<head>
<title>Login/Registor</title>
<style type="text/css">
body{
margin:0px;
padding:0;
overflow-x: hidden!important;
}
.containor{
/*text-align: center;*/
margin:225px 3px 5px 3px auto;
}
.form-group input{
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
}
.form-group label{
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons{
margin-top: 20px;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
if any one have samples like this create using html,css,bootsrap pls share to get more idea about theses things. Thanks
Is this what you are looking for?
If then add the below style to fix the input moving out of container.
.form-group input {
width: 900px;
max-width: 100%;
}
Working Fiddle
body {
margin: 0px;
padding: 0;
overflow-x: hidden !important;
}
.containor {
/*text-align: center;*/
margin: 225px 3px 5px 3px auto;
}
.form-group input {
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
max-width: 100%;
}
.form-group label {
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons {
margin-top: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
I haven't been able to figure out how to implement their tips into my styling. How can I get my label to be on the left of my input, on the same line? Also I'm just learning how to code so sorry for the inevitable sloppy-ness. This is my code:
body {
background-color: #f5f5f5;
;
}
.rng_box {
background-color: white;
width: 70%;
max-width: 800px;
left: 50%;
top: 460px;
border-radius: 20px;
padding: 20px;
position: absolute;
transform: translate(-50%, -50%);
box-shadow: 0px 2px 6px 2px #E5E5E5;
border: solid 3px #DEDEDE;
}
.title {
text-align: center;
}
.form-control {
width: 180px;
height: 30px;
margin-left: 45px;
}
.btn {
margin: 1px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="rng_box">
<h1 class="title">Random Number Generator</h1>
<div>
<form id="minAndMax">
<label for="min">Minimum:</label><br>
<input type="number" id="min" name="min" class="form-control" value="1">
<label for="max">Maximum:</label><br>
<input type="number" id="max" name="max" class="form-control" value="10">
<br>
<div class="buttons">
<button type="button" class="btn btn-success" onclick="generateRN()">Generate 🎉</button>
<button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
<button type="reset" class="btn btn-primary">Clear</button>
</div>
</form>
</div>
<hr>
<h1 id="rng_answer">0</h1>
</div>
It's easy, wrap your label and input inside a div and use flex.
https://www.w3schools.com/css/css3_flexbox.asp
Check the code below:
.label-wrap{
display:flex;
}
<div class='label-wrap'>
<label for="min">Minimum:</label><br>
<input type="number" id="min" name="min" class="form-control" value="1">
</div>
The reason is that .form-control css class has a display: block property in the _forms.scss file.
Such a property automatically makes the component goes to a new line. You can use display: inline-block !important instead and you will see the input going on the same line as the label.
In addition to this, you have also <br> tags right next your label tag to be removed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="RNG.css">
<title>Random Number Generator</title>
<link rel="icon" type="image/png" href="/Users/trippyrock/Desktop/ToolScape/favicon.png">
<style>
body {
background-color: #f5f5f5;;
}
.rng_box {
background-color: white;
width: 70%;
max-width: 800px;
left: 50%;
top: 460px;
border-radius: 20px;
padding: 20px;
position: absolute;
transform: translate(-50%,-50%);
box-shadow: 0px 2px 6px 2px #E5E5E5;
border: solid 3px #DEDEDE;
}
.title {
text-align: center;
}
.form-control {
width:180px;
height:30px;
margin-left: 45px;
display: inline-block !important;
}
.btn {
margin: 1px;
}
</style>
</head>
<body>
<div class= "rng_box">
<h1 class="title">Random Number Generator</h1>
<div>
<form id="minAndMax">
<label for="min">Minimum:</label>
<input type="number" id="min" name="min" class="form-control" value="1">
<br>
<label for="max">Maximum:</label>
<input type="number" id="max" name="max" class="form-control" value="10">
<br>
<div class="buttons">
<button type="button" class="btn btn-success" onclick="generateRN()">Generate 🎉</button>
<button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
<button type="reset" class="btn btn-primary">Clear</button>
</div>
</form>
</div>
<hr>
<h1 id="rng_answer">0</h1>
</div>
<script src="RNG.js"></script>
</body>
</html>
if you are using bootstrap. you can use the bootstrap forms with other utility classess.
<div class="shadow-sm w-75 mx-auto mt-4 p-3 rounded-lg mw-75 text-center">
<h1>Random Number generator</h1>
<form class="form-horizontal" id="minAndMax">
<div class="form-group row">
<label class="col-4 col-form-label">Minimum:</label>
<div class="col-8">
<input type="number" id="min" name="min" class="form-control" value="1" />
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label">Maximum:</label>
<div class="col-8">
<input type="number" id="max" name="max" class="form-control" value="10" />
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-success mr-2" onclick="">Generate 🎉</button>
<button type="button" class="btn btn-danger mr-2" onclick="">Ignore Fields</button>
<button type="reset" class="btn btn-primary" onclick="">Clear</button>
</div>
</form>
</div>
I want Something Like this and how can I achieve this task:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form>
<div class="col-lg-10 mb-3">
<div class="input-group">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
</div>
</div>
</div>
</form>
add to this css
.mycustom {
border: solid 1px green;
position: relative;
}
.mycustom input[type=text] {
border: none;
width: 100%;
padding-right: 123px;
}
.mycustom .input-group-prepend {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;z-index:9;
}
with one css mycustom class in your input-group class
like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><style>.mycustom {
border: solid 1px green;
position: relative;
}
.mycustom input[type=text] {
border: none;
width: 100%;
padding-right: 123px;
}
.mycustom .input-group-prepend {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;z-index:9;
}</style>
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
</div>
</div>
</div>
</form>
Just make the .input-group-prepend class position:absolute
To prevent overriding the bootstrap styles rename the .input-group-prepend to some other name
.input-group-prepend {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form>
<div class="col-lg-10 mb-3">
<div class="input-group">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
</div>
</div>
</div>
</form>
see this bootstrap's documentation http://getbootstrap.com/components/#input-groups:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
How to make it so that it appears nicely after input page with same height?
<div class="input-group">
<input type="text" class="form-control"/>
<button class="input-group-addon" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
Here is code http://jsfiddle.net/6mcxdjdr/ The first one is original input-group, the second one is something what I am trying to have
If you follow bootstrap's documentation:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Bootstrap 4 provides the classes input-group-prepend and input-group-append that allows the effect of button inside input.
Below the snippet for a left aligned button inside input-group (class input-group-prepend):
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Prepended button</button>
</div>
<input type="text" class="form-control">
</div>
And the snippet for a right aligned button inside input-group (class input-group-append):
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
here is my solution, using a little CSS to position the button to the right of the input field by adding position: absolute and a z-index:
button.input-group-addon {
position: absolute;
right: -38px;
top: 0;
padding: 2px;
z-index: 999;
height: 34px;
width: 38px;
}
http://jsfiddle.net/6mcxdjdr/1/
Another idea is to manipulate the form submit with javascript, so you dont have to create your own button but submit the form by clicking on the bootstrap span. This could be done by
$('.input-group-addon').click(function(){ $('#myform').submit(); });
You can also try this way
<div class="input-group">
<input type="text" class="form-control search-input" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span><span class="input-group-addon">
<i class="fa fa-refresh"></i>
</span>
</div>
.search-input {
border-right: 0;
}
.input-group-addon {
background: white;
border-left: 0;
border-right: 0;
}
.input-group-addon:last-child {
border-left: 0;
border-right: 1px solid #ccc;
}
Try this,
.input-group-addon{
width:50px;
position:absolute;
margin-left:196px;
height:34px;
}
.input-group-addon > i{
text-align:center;
font-size:18px;
}
Here's how I did it, I had to override some css...
(Bootstrap 4 Beta 2)
Html
<div class="input-group">
<input type="search" class="form-control" placeholder="search..." />
<span class="input-group-addon input-group-addon-btn bg-white">
<button class="btn px-2" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</div>
And here's the css
#app-search .input-group-addon-btn {
padding: 0;
button {
border: none;
background: transparent;
cursor: pointer;
height: 100%;
}
}
Here is my code for the form:
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff">
>
</button></span>
</div>
</form>
</div>
The problem I have is when I add a button to the button group, it is bigger than the input box:
How can I stop this from happening? Thanks
You could do it by changing the button to a span with role=button on the parent and switching a few styles around, like so
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon" style="background-color:#6e5cbf;" role="button">
<span id="filter" onclick="submitForm();" style="color: #ffffff">
>
</span>
</span>
</div>
</form>
</div>
</div>
While the bootstrap documentation doesn't say anything about buttons, it does say
We do not support multiple form-controls in a single input group.
Looking at the styling of buttons vs. form-controls I'd assume that the restriction extends to buttons as well.
It's going to look like this (image)
Try to add form-group for these input and button element.
something like
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
</div>
<div class="form-group">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff"></button>
</span>
</div>
</div>
</form>
It will differentiate those two blocks and you can write cutom classes on top of that
Your button has class .btn which has following style:
.btn{
display: inline-block;
padding: 6px 12px; //this is what making it to extend space
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143; //and this too
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
So the work-around will be override those properties. Add a class say 'special' to the button and override following attributes:
.special{
padding:0px !important;
line-height:1
}
DEMO
Why is everyone making it complicated? Just put this and y'all will be fine.
This:
<input class="btn btn-outline-primary form-control-sm" type="button" Value="Send" />
instead of:
<button class="btn btn-outline-primary form-control-sm">Send</button>
Boom. We done.