I need to put a glyphicon in the input for validation. For example I want to allow for phone numbers that are 10 numbers long. When a person inputs a phone number, a warning icon is displayed because the number is not 10 numbers long. An ok icon is displayed when the number is long enough.
The code is something like this I think (telefon means phone):
enter code here <ng-form role="form">
<div class="form-group has-feedback">
<label class="col-lg-2 col-md-2 col-sm-3 col-xs-6 control-label">Telefon</label>
<div class="input-group col-lg-10 col-md-10 col-sm-9 col-xs-10">
<input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="vm.firma.telefon" ng-maxlength="4" placeholder="Telefon ...">
<span class="success">
<i class=" glyphicon glyphicon-ok-circle form-control-feedback" style="color:green" aria-hidden="true"></i>
</span>
<span class="danger">
<i class=" glyphicon glyphicon-exclamation-sign-circle form-control-feedback" style="color:red" aria-hidden="true"></i>
</span>
</div>
</div>
</ng-form>
u can play with css but try this site http://formvalidation.io/examples/html5/
Related
I'm trying to make WordPress theme based on Bootstrap4. Everthing is going fine, but I stock with my contact form, which looks like this:
Here is my code:
<form method="POST">
<div class="input-group input-group-lg mb-3 mt-5">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Imię i nazwisko" name="full_name">
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-envelope-open"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="E-mail" name="email">
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-pencil-alt"></i>
</span>
</div>
<textarea class="form-control" placeholder="Treść wiadomości" rows="5" name="message"></textarea>
</div>
<input type="submit" value="Wyślij wiadomość" class="btn btn-primary btn-block btn-lg">
The problem is, I don't know how to transform this into a WordPress theme. I added Form in Contact Form 7, like this:
[text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
[email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
[textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]
and <?php echo do_shortcode( '[contact-form-7 id="5" title="Formularz kontaktowy"]' ); ?> in my index.html.
It works fine and even has some Bootstrap styles, but looks nothing like in the picture. Especially I don't know how to set the size of my fields and, more important, how to include this fancy little icons in them?
As a beginner, I will appreciate any advice that would help me solve my issue.
You can use html in your contact form 7 form editor.
Replace this code in Contact form 7 => Form text area.
<div class="input-group input-group-lg mb-3 mt-5">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user"></i>
</span>
</div>
[text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-envelope-open"></i>
</span>
</div>
[email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-pencil-alt"></i>
</span>
</div>
[textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
</div>
[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]
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.
It should be simple but I can't see the problem.
I'm building a page like menu in the center and a search box with icon on the right side, I'm using keystonejs, pugjs and bootstrap.
Here's the problematic part of code:
div(style='margin-top:60px; width:1000px')
row
div.col-md-2.col-md-offset-4.text-left
a(href='/keystone') Hommes
div.col-md-2
a(href='/keystone') Femmes
div.col-md-2.text-right
a(href='/keystone') Enfants
div.form-group.col-md-1.col-md-offset-1
div.form-group.has-feedback
input(class='form-control', type='text', id='search-addon')
i(class='glyphicon glyphicon-search form-control-feedback')
it compiles in:
<div style="margin-top:60px; width:1000px;">
<row>
<div class="col-md-2 col-md-offset-4 text-left">Hommes</div>
<div class="col-md-2">Femmes</div>
<div class="col-md-2 text-right">Enfants</div>
<div class="form-group col-md-1 col-md-offset-1">
<div class="input-group has-feedback">
<input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</div>
</row>
The produced HTML looks OK, but the display doesn't include the icon in the input like in this fiddle
Here's what it displays
What am I doing wrong ... again :)
Thanks
Try wrapping
i(class='glyphicon glyphicon-search form-control-feedback')
in
span.input-group-addon
more: http://getbootstrap.com/components/#input-groups
ex:
div.form-group.has-feedback
input(class='form-control', type='text', id='search-addon')
span.input-group-addon
i(class='glyphicon glyphicon-search form-control-feedback')
I changed the code from
<div class="form-group col-md-2">
<div class="form-group has-feedback">
<input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search"></i>
</div>
</div>
To
<div class="col-md-1 col-md-offset-1">
<div class="form-group">
<div class="form-group has-feedback">
<input type="text" class="form-control"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
It displays correctly. But I've found that some argue that the problem is related tothe label that's mandatory
https://github.com/twbs/bootstrap/issues/12911 and https://github.com/twbs/bootstrap/issues/12873
https://jsfiddle.net/5nj5nmqz/3/
<h1 class="page-header row">
Header
<div class="col-md-4">
<a href="#" class="btn btn-default">
Export spreadsheet
<i class="fa fa-download"></i>
</a>
</div>
<div class="col-md-4 form-group has-feedback">
<input type="text" class="form-control search pull-right" placeholder="Search by check name...">
<span class="glyphicon glyphicon-search"></span>
</div>
</h1>
Having a bit of trouble getting the elements within the header to align correctly, as well as getting a bootstrap glyphicon icon to line up inside the input field.
Any ideas on how this could be done correctly? I tried wrapping in rows and moving the columns, but it seems to be off every time.
Try this.
<h1 class="page-header">Header</h1>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default pull-right export">
Export spreadsheet
<i class="fa fa-download"></i>
</a>
</div>
<div class="col-md-4 form-group has-feedback pull-right">
<div class="form-group has-feedback">
<input type="text" class="form-control search pull-right" placeholder="Username" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</div>
</div>
Few things to note:
<h1 class="page-header row"> is wrong. When using the bootstrap cols, you should create a row by simply saying <div class="row">.
Bootstrap can have 12 columns per row I think. If you are designing the row-column way, the correct way is to create a <div class="row"> and it's children should be <div class="col-**-n"> where the n's of all children add up to 12.
I have a form builded with Bootstrap 3 and Ace Admin theme.
In this form, I have form groups with addons but addons are not stucked with input field.
<div class="col-md-3">
<div class="input-group">
<input type="date" name="dateActivation" id="dateActivation" class="input-control">
<span class="input-group-addon">
<i class="ace-icon fa fa-calendar"></i>
</span>
</div>
</div>
How to stuck the addon with the input field ?
I don't want to use "form-control text-left" classes because the size of my input field will be changed.
I tried that :
<div class="col-md-3">
<div class="input-group pull-left">
<input type="date" name="dateActivation" id="dateActivation" class="input-control pull-right">
<span class="input-group-addon">
<i class="ace-icon fa fa-calendar"></i>
</span>
</div>
</div>
It do the job for input field & addon but the pull-left doesn't work.
An idea ?
Here is the fiddle
The class for the date input needs to change to form-control
Demo Fiddle
Change your HTML to:
<div class="input-group">
<input type="date" name="dateActivation" id="dateActivation" class="form-control">
<span class="input-group-addon">
<i class="ace-icon fa fa-calendar"></i>
</span>
</div>