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.
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.
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>
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
I have a simple daterange input box on my webpage. I am trying to add a simple calender glyphicon to it (inside the box). No matter what i try it doesnt show up:
My code:
<div class="col-xs-6 date-range form-group has-feedback" id="date_range">
<input name="daterange" class="form-control pull-right" style="width: 40%">
<i class="fa fa-calender form-control-feedback"></i>
</div>
However It only shows up as :
Im am trying for something like this:
Maybe your problem is that you are saying you want a .glyphicon icon but in your code you have .fa. fa = font-awesome, not glyphicon.
Try this code:
<div class="form-group has-feedback">
<asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" placeholder="Password"></asp:TextBox>
<span class="glyphicon glyphicon-asterisk form-control-feedback"></span>
</div>
First, you're probably using the incorrect class and HTML element. fa and fa-calendar are font-awesome classes to add those icons. You want to use glyphicon and glyphicon-calendar in your HTML <span> class as well.
Second, you could use a wrapper and some CSS to achieve this. See the snippet below:
.input-wrapper {
border: 1px solid #ccc;
position: relative;
padding-left: 20px;
}
.input-wrapper input { // Remove the borders
border: none;
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.input-wrapper span.glyphicon {
position: absolute;
top: 10px;
left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 date-range form-group has-feedback" id="date_range">
<div class="input-wrapper">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<input name="daterange" class="form-control">
</div>
</div>
The removal of the default borders from Bootstrap CSS can be found here: Override twitter bootstrap Textbox Glow and Shadows
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;
}