I want to create an input group with text field and an icon at the beginning of the text field. I have the following code which shows only the text field and I cannot find out why the icon does not appear.
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-th-list"></i>
</div>
<input type="text" class="form-control" id="location" placeholder="Location">
</div>
How can I create an input group with an icon or input with an icon before the placeholder? What is wrong in the code above?
you can use form-group row
<div class="form-group row">
<label for="staticEmail" class="col-lg-1 col-form-label"><i class="fas fa-th-list"></i></label>
<div class="col-lg-5">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
</div>
</div>
Related
I am trying to center everything in a form, with the labels and the values in input fields. This works, except when using the input-group-append class in Bootstrap. The input field and the appended button is treated as one and the entire thing is centered. How can I center just the input field?
It looks like this:
My code:
<div class="col-lg-12 text-center">
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="firstname">Name</label>
<input name="firstname" class="form-control" style="text-align:center"type="text" value="john">
</div>
</div>
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="email">E-mail</label>
<div class="input-group">
<input name="email" type="text" class="form-control" style="text-align:center" value="info#domain.com">
<span class="input-group-append numspan">
<button class="btn btn-primary" type="button">Search</button>
</span>
</div>
</div>
</div>
I am trying to fit the font-awesome icon within the textbox, but I was unable to do so. I tried to decrease the width of the textbox but still its appearing a line below. Can you please guide me to fix my mistake in this. I am attaching the code below. Thanks in advance.
<div class="form-row">
<div class="form-group col-md-6">
<label for="primaryName">PRIMARY NAME</label>
<input type="text" class="form-control" id="primaryName" name="primaryName" placeholder="Name" >
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-light" id="basic-addon1"><i class="fas fa-user"></i></span>
</div>
</div>
<div class="form-group col-md-6">
<label for="primaryPhone">PRIMARY PHONE NUMBER</label>
<input type="tel" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Phone number">
</div>
</div>
The output on the screen is as below :
I want the output to be something like this:
Okay, the issues are:
You have a wrong class name: fas fa-user should be fa fa-user.
You don't have input-group <div> to enclose.
Fixing both above will fix it.
<div class="form-row">
<div class="form-group col-md-6">
<label for="primaryName">PRIMARY NAME</label>
<div class="input-group">
<input type="text" class="form-control" id="primaryName" name="primaryName" placeholder="Name" >
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-light" id="basic-addon1"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="primaryPhone">PRIMARY PHONE NUMBER</label>
<input type="tel" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Phone number">
</div>
</div>
This syntax is not wrong. It is working with latest Font Awesome versions ( > v5.0).
Font Awesome 5,
Syntax - <i class="fas fa-user"></i>
Font Awesome 5 CDN - https://use.fontawesome.com/releases/v5.2.0/css/all.css
Font Awesome 4,
Syntax - <i class="fa fa-user"></i>
Font Awesome 4 CDN - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
If you need any clarification, let me know.
Thanks.
I was attempting to make a contact form for my site, which can be previewed here.
I used the Bootstrap Validator script to add verification icons/checks. However, when a textbox is selected that is used with the script, the validation icon disappears, like this:
This happens with the other boxes as well (except for the Subject box, which I didn't activate the validation script for.) How would I fix this? It worked on CodePen, but not on my site.
Here's the HTML for the page.
HTML and CSS for just the form:
<div class="container">
<form class="well form-horizontal" action="https://formspree.io/example#example.com" method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Me</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Name <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Email <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="email" placeholder="Email Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Subject</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-comment"></i></span>
<input name="_subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Message <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<textarea class="form-control" name="input" placeholder="Message"></textarea>
</div>
</div>
</div>
<!-- Config -->
<input type="hidden" name="_next" value="/contactthanks.html" />
<!-- Required fields text -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<div class="text-danger">* Required field</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary"><span class="fa fa-send"></span> Send</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
textarea {min-height:50px; resize:vertical;}
Thanks in advance, and sorry for the long question.
Using Chrome Developer tools, you can see that adding the :focus pseudo-class to the element increases the z-index value of the <input /> to 3, while the .form-control-feedback class maintains a z-index of 2.
Adding this selector appears to resolve it:
input:focus ~ .form-control-feedback {
z-index: 3;
}
However, my guess is that this is the intended behavior in Bootstrap so the icon does not get in the way while the user is typing.
.input-group .form-control:focus {
z-index: 3;
}
When you select an input, its icon goes behind cos of input's z index. Maybe try changin it ?
I have a password input box which contains a glyphicon info image on the right side. I am using parsley.js to validate this input box. On form submit if password validation fails parsley displays the error message beneath the input box as expected but also breaks the alignment of the glyphicon icon and makes it protrude out of the input box. Please find jsfiddle demo here
https://jsfiddle.net/bsbef0qd/2/ . Thanks
<form id="form" data-parsley-validate="">
<div class="row">
<div class="col-xs-4">
<label for="password" class="control-label">Password</label>
<div class="input-group add-on">
<input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" required/>
<span class="input-group-addon">
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions">
<i class='glyphicon glyphicon-info-sign'></i>
</a>
</span>
</div>
</div>
<div class="form-group col-xs-4">
<label for="confirm" class="control-label">Confirm Password</label>
<input type="password" name="confirm" value="" class="form-control input-sm" />
</div>
</div>
<button type="submit">Submit</button>
</form>
You can change the error displaying position..
Add this part to your form tag as a attribute "data-parsley-errors-container="#errorContainer""
<form id="form" data-parsley-validate="" data-parsley-errors-container="#errorContainer">
put this div to where you want the errors to display
<div id="errorContainer"></div>
I have edited your fiddle check the demo
Also Check the Plugin documentation here
also, you can use data-parsley-errors-container="#your-div-id" in your input element
<div class="form-group">
<label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class=" datetimepicker3 input-append timepick">
<input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required" id="startTime" />
<span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>
</div>
<div id="startTimeErrorContainer"></div>
</div>
I have a form with some input tags and for each of it(I'm using bootstrap). I would like to use span with backgroud coloro but I have a problem with the size of it, because depends of text length (the best way is to use awesome, but I don't find icons useful to my purpose).
Is there a way to fix the width of the grey part of div? I tried with width, like the image, but it resize all the input fields.Thanks
<div class="row">
<!-- Fleet fields -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-car fa-fw"></i> Fleet inputs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form">
<div class="form-group input-group">
<span class="input-group-addon">Ap</span> <input type="text"
class="form-control" placeholder="Application">
</div>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Cubic">
<span class="input-group-addon">cm<sup>3</sup></span>
</div>
<div class="form-group input-group">
<input type="number" class="form-control" placeholder="Power">
<span class="input-group-addon">H P</span>
</div>
<div class="form-group input-group">
<span class="input-group-addon">Eu</span> <input type="text"
class="form-control" placeholder="Euro class">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Et</span> <input type="text"
class="form-control" placeholder="Engine type">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Tr</span> <input type="text"
class="form-control" placeholder="Traction">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Ts</span> <input type="text"
class="form-control" placeholder="Transmission">
</div>
<div class="form-group">
<label>Note</label>
<textarea class="form-control" rows="2" maxlength="100"></textarea>
</div>
</form>
</div>
<!-- /.panel-body -->
</div>
</div>
Css of input -group-addon
.input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}
you can use for fixed width of grey part of div
you can use for fixed width of grey part of div
1.<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon3">#</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> </div>
2. can use also another div <div class="input-group input-group-sm">
3. can use also <div class="input-group">
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"