I have a bootstrap input field and a font awesome edin icon. Currently the icon is displayed below the input box. What I am trying to do is to display them on one line. Sadly, as basic as this is, i can't make it work. I tried with floating the elements, giving them an inline-block and other thing, which didn't work.
Please, help :
<div class="col-sm-2">
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
</div>
According to the bootstrap documentation (http://getbootstrap.com/css/#forms-inline) you can use the input group with an addon to put the icon inside the addon:
<div class="input-group">
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
<div class="input-group-addon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</div>
</div>
You should try display: flex; on the container and <i> tag & align-self: center; only on the <i>.
Here an example:
.col-sm-2 {
display: flex;
}
.col-sm-2 > i {
display: flex;
align-self: center;
width: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-2">
<i class="fa fa-pencil" aria-hidden="true"></i>
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
</div>
Fiddle demo
I have a simple solution by css. Firstly add a new class to column.
HTML=>>>
<div class="col-sm-2 myForm">
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
</div>
CSS=>>>
.myForm .form-control{
float:left;
width:calc(100% - 35px);
}
.myForm .fa{
float:right;
width:30px;
}
Try this ...
Here is the live demo on jsfiddle
Better solution is bootstrap form css. Follow this link:
http://getbootstrap.com/css/#forms
Related
I'm trying to create an input with an icon indicating its purpose, but it's not rendering how I like:
I want the input at the same level as the icon, however, dispite my best efforts:
.field
{
margin: auto;
border-radius: 10px;
width: 67%;
white-space: nowrap;
overflow-x: auto;
}
.field input, .field label
{
display: inline-block !important;
margin: 0;
padding: 0;
}
<div class = 'field w3-bar w3-center w3-border w3-border-green'>
<label class='w3-bar-item w3-left w3-border-right w3-border-green fas fa-user' for='username'></label>
<input class="w3-bar-item w3-right w3-input w3-border-green w3-hover-border-green no-box" id="username" name="username" required type="text" value="">
</div>
— it still renders on a new line! Note that I'm using w3.css and font-awesome. Is there something I'm missing? Thank you.
How about like this?
.custom-input{
display:inline-block;
margin-left:12px;
}
.input-component{
border:3px solid teal;
padding:8px;
padding-left:30px;
}
.input-icon{
color:teal;
position:absolute;
margin-right:-30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="custom-input">
<span class="glyphicon glyphicon-user input-icon"></span>
<input class="input-component" placeholder="username...">
</div>
<div class="custom-input">
<span class="glyphicon glyphicon-calendar input-icon"></span>
<input class="input-component" type="date">
</div>
<br>
<br>
<div class="custom-input">
<span class="glyphicon glyphicon-lock input-icon"></span>
<input class="input-component" type="password" placeholder="password"/>
</div>
You can minimize the code to something like this:
<div style="width: 67%;display:flex; align-items:center;" class ="w3-padding w3-margin w3-border w3-border-green w3-round-large">
<label style="width:10%" class="w3-center w3-border-right w3-border-green fa fa-user" for="username"></label>
<input style="width:80% " class="w3-input" id="username" name="username" required type="text" value="">
</div>
And you don't need define the class "field" and the others.
I have made bootstrap contact from in which I want to align all its element in center.
Below is my code:
.third-section > form > input{
width: 35%;
margin: auto;
margin-top: 25px;
}
.third-section > form > textarea{
width: 35%;
margin:auto;
margin-top: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="third-section">
<form>
<input type="text" class="form-control" placeholder="Name" required/>
<input type="email" class="form-control" placeholder="Email" required/>
<textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>
<input type="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
</section>
SCREENSHOT
As seen in screenshot button is not aligned in center.Someone please let me know how can I get desired layout. Any help would be appreciated.
THANKS
Add the following CSS
.third-section > form {
text-align: center;
}
if you could provide a working jsfiddle with all of your code in it, that would help. However, from what I can see, your issue can be solved by putting all of your form inside of a container with the text-center class.
<div class="container text-center">
...
</div>
Add bootstrap class 'text-center'. please refer the below code.
<section class="third-section text-center">
<form>
<input type="text" class="form-control" placeholder="Name" required/>
<input type="email" class="form-control" placeholder="Email" required/>
<textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>
<input type="submit" class="btn btn-primary" value="SUBMIT"/>
</form></section>
Your button is not aligned because the your button is actually an input. All the elements are centered because they have margin: auto (so the remaining space is split evenly between the two margins). But the input elements (and the elements with class btn from bootstrap) are inline-block, and margin left and right properties are not working on inline and inline-block elements.
One option is the one that metaDesign sugested. Another option is to explicitly set the display property of the button to display: block.
so something like:
input.btn {
display:block;
}
is there any way to achieve something like this:
I've tried options that I found here in stack (with using span) but even if i made it work it is impossible for me to do that white line on the right from icon, can someone help me?
My current code looks like that:
<form>
<input type="text" name="firstname" placeholder="Name">
<input type="text" name="firstname" placeholder="e-mail">
<input type="text" name="firstname" placeholder="website">
</form>
I've also tried adding that icon in container with borders to achieve effect:
<form>
<span class="form_frame"><i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
<input type="text" name="firstname" placeholder="Name">
And css:
.form_frame {
height: 60px;
border-width: 1px solid;
border-color: white;
width: 100%;
background-color: #2b2b2b;
But no succes
Thank's for any help.
Add the icon and the input inside a span. You can then add a border to the whole span if you want to our you can put a border on just the icon or input box.
.fa-address-book-o {
border: solid;
border-color: red;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<span><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"/></span>
You can use Labels
I thinks this is a good start.
.wr{border:2px solid black;padding:12px;}
<form>
<diV class="wr">
<label for="user"> <i class="fa fa-camera-retro">(icon_img)</i></label><input type="text" name="user" placeholder="Username"/> </diV>
<div class="wr">
<label for="pass"> <i class="fa fa-futbol-o">(icon_img)</i></label><input type="password" name="password" placeholder="Password"/> </div>
</form>
How do I set multiple file input on the same line ? Like radio-inline sets radio buttons on the same line. Is there any way to do this for file input ?
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class = "form-inline">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
</div>
<div class = "form-inline">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
</div>
Use inline-block on form-inline.
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
.form-inline{
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class = "form-inline">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
</div>
<div class = "form-inline">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
</div>
Cover both of those inputs withing single div tag with class form-inline.
Do you mean something like this. Check your fiddle. Its updated. --
<div class = "form-inline">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> File1
</label>
<input id="file-upload" type="file"/>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> File1
</label>
<input id="file-upload" type="file"/>
</div>
Juste add display "inline-block" to div with class "form-inline" :
.form-inline {
display:inline-block;
}
I belive it should do the job.
EDIT: too late ;)
You can give the container .form-inline the display:inline-block; property.
Hope i got your question right.
In addition to FreeKrishna's answer, you can
float:left
in css and leave the divs as is.
I am using external CSS for some style ,
my link tag is as follow ,
<link href="<%=request.getContextPath()%>/css2/form.css" rel="stylsheet" TYPE="text/css">
the CSS file has following content
#CHARSET "ISO-8859-1";
legend {
padding: 0;
margin-top:-20px;
margin-left: -20px;
margin-right:-40px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #918D8D;
}
.input-group{
margin-left:15px;
}
and I used these classes in jsp as follow,
<div class="form-group">
<label for="dob" class="control-label col-xs-4">Date Of
Birth(DOB) :</label>
<div class="col-xs-8">
<div class="col-lg-8 input-group date form_date1" data-date-format="dd MM yyyy" data-link-format="yyyy-mm-dd">
<input type="text" class="form-control " size="10" name="dob" id="date" ">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
why it is not working , here i am trying to add margine to text box.
Not sure which css you want to apply to your textbox. But if you want to apply input-group to your textbox then update your input tag as mentioned below :
<input type="text" class="form-control input-group" size="10" name="dob" id="date" ">
and apply !important to the margin of css input-group as mentioned below :
.input-group{
margin-left:15px !important;
}