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
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>
Good evening everyone, I am creating a form in an asp.net core solution and I have a problem with my ccs.
When I press the send button and I have empty inputs, it validates and sends an error message; the problem is when this action is executed, the size of the inputs changes.
How can I move these labels under my text boxes?
<label asp-for="CxP_NroControl" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-paragraph"></i>
</span>
</div>
<input asp-for="CxP_NroControl" class="form-control" />
<span asp-validation-for="CxP_NroControl" class="text-danger"></span>
</div>
<label asp-for="CxP_NroFactura" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-paragraph"></i>
</span>
</div>
<input asp-for="CxP_NroFactura" class="form-control" />
<span asp-validation-for="CxP_NroFactura" class="text-danger"></span>
</div>
Apply Following CSS will give you desire output.
span.text-danger {
display:block;
}
I have a bootstrap form in which i have used text boxes with the label and it is not working properly. If i removed the font awesome icon which is inside the span tag it is working properly this is my html
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
I want to do something like this
https://jsbin.com/quxodidebi/edit?html,js,output
How about this code? Bootstrap 3:
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Bootstrap 4
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
</div>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Code snippet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user fa-fw"></i>
</span>
</div>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Link to JS Fiddle: https://jsfiddle.net/sefnanLm/
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>
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>