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;
}
Related
I have the following snippet:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Name" class="form-control" placeholder="Name" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
<small>
<span asp-validation-for="Name" class="text-danger"></span>
</small>
</div>
</div>
In some situations the validation message is not displayed below the input but right next to it. How can I force the message to be displayed below the input?
You can try to put validation error message outside <div class="input-group">:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Name" class="form-control" placeholder="Name" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Name" class="text-danger"></span>
</small>
</div>
result:
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"]
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
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>
See http://jsfiddle.net/7T9r9/ as an example.
<li>
<span class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" class="checkbox"/>
</span>
<input type="text" class="form-control input-append" value="test">
<span class="input-group-addon"></span>
</div>
</div>
<div class="col-md-9">
<div class="input-group">
<input type="text" class="form-control"
value="test">
<span class="input-group-addon">
<a href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</span>
</div>
</div>
</span>
</li>
What I would like to achieve is to have the first input width fitting the text inside of it (a fixed width would do as well I guess).
The second input should occupy the rest of the row and all the elements should be on the same line.
Is there a way to do this?
I'm guessing your fiddle is an example of the effect that you want, but you don't want to use different columns for it.
Dynamic width Text input based on value length is not possible (unless recently via some css goddess like Verou finding something). So assuming fixed width on that guy.
The other guy then can take advantage of the other fixed width to do a margin etc.
Something like this:
HTML
<span class="row">
<div class="test1 input-group">
<span class="input-group-addon">
<input type="checkbox" class="checkbox"/>
</span>
<input type="text" class="form-control input-append" value="test">
<span class="input-group-addon"></span>
</div>
<div class="test2 input-group">
<input type="text" class="form-control"
value="test">
<span class="input-group-addon">
<a href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</span>
</div>
</span>
CSS
.row {
position:relative;
}
.test1 {
width:200px
}
.test2 {
position:absolute !important;
top:20px;
margin-left:200px;
}