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>
Related
I want to use fa-plus-circle item next to the text field as below. How can I achieve that using CSS and HTMl. I haven't use any CSS right now since it's affecting to all the other places that using fa-plus-circle.
.html
<div class="col-sm-6">
<label class="col-sm-3 col-form-label" >My Name <span class="fa fa-star required-field"></span> </label>
<input type="text" class="form-control"><span
class="fa fa-plus-circle text-success cursor-point"></span>
</div>
https://getbootstrap.com/docs/5.0/forms/input-group/
You can use input group for this
<div class="input-group mb-3">
<input type="text" class="form-control">
<span class="input-group-text">
<span class="fa fa-plus-circle text-success cursor-point"></span>
</span>
</div>
Try This way
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class="flex-fill">
<input type="text" class="form-control">
</div>
<span class="ml-3 fa fa-plus-circle text-success cursor-point"></span>
</div>
</div>
I have a form in an application using Bootstrap 4. It renders as I want it to in all browsers, except Internet Explorer 11.
I have used Bootstrap's .form-inline class because according to the docs
Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.
The correct rendering of the form looks like this. The screenshot below was taken from Chrome v80:
In Internet Explorer 11 it renders as follows.
The markup is as follows.
<div class="row">
<form method="get" class="form-inline" action="#">
<div class="col">
<label for="date_start" class="mr-2 float-left">From</label>
<div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
<div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
</div>
<input type="text" name="dateStart" value="2020-03-17" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">
</div>
</div>
<div class="col">
<label for="date_end" class="mr-2 float-left">To</label>
<div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
<div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
</div>
<input type="text" name="dateEnd" value="2020-03-24" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">
</div>
</div>
<button class="btn btn-primary btn-md-top-pad">View Notifications <i class="fas fa-chevron-right" aria-hidden="true"></i></button>
</form>
</div>
If I remove the .form-inline in Internet Explorer 11 using Developer Tools the layout is more usable but still broken.
I read inline-flex input element breaks to new line in IE11 and tried swapping my .row with a .container. This seems to help but it centres the form and therefore doesn't look as I want in other (non IE 11) browsers. It also makes the input fields look much longer than desired.
Surely it is possible to left align the form and have it all on one line?
What is the problem with this and how can I fix it for IE 11 in a way that won't break it for other browsers? I want to render it as per the first screenshot, consistently in all browsers.
I compared with the official demo which can work well in IE 11, it seems that the issue is with <div class="col">. The elements in the form are not wrapped by div .col in the official demo. I removed them and it can work well in IE 11 and other browsers.
Online demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form method="get" class="form-inline" action="#">
<label for="date_start" class="mr-2 float-left">From</label>
<div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
<div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
</div>
<input type="text" name="dateStart" value="2020-03-17" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">
</div>
<label for="date_end" class="mr-2 float-left">To</label>
<div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
<div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
</div>
<input type="text" name="dateEnd" value="2020-03-24" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">
</div>
<button class="btn btn-primary btn-md-top-pad">View Notifications <i class="fas fa-chevron-right" aria-hidden="true"></i></button>
</form>
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'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 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/