For single-input forms in bootstrap 4, a nice way to place font-awesome icons is the input-group-addon class:
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input class="form-control" type="text" placeholder="Email address">
</div>
which renders like this:
However, for multipart forms, it seems like bootstrap 4 is implicitly advising the use of the <fieldset> tag, but the natural extension of this idiom doesn't work:
<form action="" method="POST">
<fieldset class="form-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input class="form-control" type="text" placeholder="Email address">
</fieldset>
</form>
and it renders with the icon on top:
Is there a way to get the icon to set to the left of the field without writing custom css?
Try to change your form-group class to input-group:
<form action="" method="POST">
<fieldset class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input class="form-control" type="text" placeholder="Email address">
</fieldset>
</form>
It's because you're wrapping the input-group-addon and form-control within the <fieldset> which is set as the parent form-group.
Create an extra <div> or <p> around the input-group-addon and the form-control and give that the class of form-group instead.
Like so:
<form action="" method="POST">
<fieldset>
<div class="form-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input class="form-control" type="text" placeholder="Email address">
</div>
</fieldset>
</form>
I think that you can also get rid of the span around the font-awesome icon, too. You can put that input-group-addon class as part of the <i> tag. Can't remember without trying it out myself. Don't hold me to it, but try and see.
Like this:
<i class="fa fa-envelope input-group-addon"></i>
Related
I have this code:
<div class="{{($type != 'forecast')?'col-md-8':'col-md-8'}}">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>
this is the UI
I just want the <i> icon be next to the input field and not in the bottom.
How I can achieve that?
Wrap the input field and the icon within a div with the class input-group.
<div class="input-group">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}}>
<i class="fa fa-info-circle" title="test"></i>
</div>
this is the solution
<div class="form-group">
<label>Name:</label>
<div class="input-group" style="display: flex">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>
My required attribute is not working when I am clicking on submit button in login component.
Here is my login form code -
<form onSubmit={this.onSubmit} noValidate>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-envelope"></i>
</span>
</div>
<input
type="email"
className="form-control"
name="email"
placeholder="Please enter your email"
value={this.state.email}
onChange={this.onChange}
required="required"
/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input
type="password"
className="form-control"
name="password"
placeholder="Please enter password"
value={this.state.password}
onChange={this.onChange}
required=""
/>
</div>
</div>
<br />
<button type="submit" className="btn btn-primary btn-block">
{loading ? <LoadingSpinner /> : "LOGIN"}
</button>
</form>
I also checked with removing novalidate attribute in form but still It's not working.
remove the noValidate from the form attribute in the first line and you are good to go
it worked for me with your code
Code
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
<input type="text" class="form-control" id="txtPreCurrentdate" data-provide="datepicker" placeholder="Enter a Start Date">
<span class="input-group-addon">-</span>
<input type="text" class="form-control" id="txtPostCurrentdate" data-provide="datepicker" placeholder="Enter an End Date">
<!-- want the below section to move to the right. -->
<div class="input-group-addon">
<i class="fa fa-server"></i>
</div>
<input type="number" id="txtResltsPerPage" class="form-control" ng-model="pageSize" placeholder="Results per Page 10">
</div>
With the above code all the elements appear next to each other as shown in the above picture. I need the last <input> and <div> elements in the above code to appear on the right side of the form.
wrap this:
<div class="input-group-addon">
<i class="fa fa-server"></i>
</div>
<input type="number" id="txtResltsPerPage" class="form-control" ng-model="pageSize" placeholder="Results per Page 10">
with a <div class="pull-right"></div>, see Docs about helpers classes floats
My form is marked up using bootstrap. It renders more or less as I intended, but there's no space between the input groups, as illustrated below. The data-binding attributes are knockout syntax, but I don't think they matter one way or the other for the purposes of this question.
<div style="width: 250px;">
<form class="form-horizontal">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-search"></i>
</span>
<input class="form-control" placeholder="foo NEAR bar"
data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-step-backward"></i>
</span>
<input class="form-control" type="text"
data-bind="datepicker: { value: a, dateFormat: 'd MM yy' }" />
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-step-forward"></i>
</span>
<input class="form-control" type="text"
data-bind="datepicker: { value: b, dateFormat: 'd MM yy' }" />
</div>
<div class="btn-group btn-group-lg pull-right">
<span class="btn btn-default"><i class="icon-download-alt"></i></span>
<span class="btn btn-primary"><i class="icon-arrow-right"></i></span>
</div>
</form>
</div>
Here we see the result of the above mark-up.
Bootstrap is pretty comprehensive, so I imagine there are tags for controlling this, but the documentation is a terse run of samples and I haven't found anything similar enough to clue me in.
Often bootstrap is quite cleverly constructed so that a single class applied to (say) the parent div will apply in various ways to all the children. So, what tag do I need and where ought I place it in order to get interstitial spacing for the input groups?
The class that applies a margin between groups in a form is .form-group. Bootstrap says:
Do not mix form groups directly with input groups. Instead, nest the
input group inside of the form group.
So in your case:
Normal form
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-search"></i>
</span>
<input class="form-control" placeholder="foo NEAR bar" data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
</div>
</div>
The only problem here is that you are using .form-horizontal. When you do that, Bootstrap applies a negative left and right margin to the .form-control because it expects you to arrange your fields using .col-xs-4 (or whatever). So I suggest either you don't use that .form-horizontal class in the form, or you add a col-* class to fix the negative margin:
Horizontal form
<div class="form-group">
<div class="col-xs-12">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-search"></i>
</span>
<input class="form-control" placeholder="foo NEAR bar"
data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
</div>
</div>
</div>
Demo(s)
I'm trying to create a simple inline form using input groups to display icons before the inputs. As far as I'm aware of I'm following the documentation but the form doesn't display as expected. See this JSFiddle, it demonstrates the problem. I assumed it should be displayed like this (only with the icons prepended of course). How can this be solved?
My code:
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password"/>
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
This is known issue and will be fixed in Bootstrap v.3.2.0 according to this ship list.
Before that you can fix it your self like this:
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto !important;
}
}
i've made it work like this:
<form class="form-inline" role="form">
<div class="row">
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</div>
http://jsfiddle.net/n5qmc/
Taken from Bootstrap Docs
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
I also added in semantic attributes for the labels you should always be using on every input (use .sr-only to hide the labels if necessary). This makes the form not inline but horizontal.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-envelope-o fa-fw"></i>
</span>
<input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
Not sure if this is helpful, but I thought I would post as I haven't seen this elsewhere. I was trying to get an inline form with inline labels and an add-on using Bootstrap v3. Here is the code that worked for me. I used the grid system in divs to position the label and input group and the add-on within a grid item.
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="input_one">Label Text</label>
</div>
<div class="col-sm-10">
<div class="input-group">
<input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
<span class="input-group-addon">Add on text</span>
</div>
</div>
</div>