in bootstrap 3 i want an input in one row by grouping the input i done it but the space is not occurring can any one help http://jsfiddle.net/qkPEm/1/
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input id="dd" class="location" name="city" type="text" placeholder="Source" size="90" />
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<input id="geocomplete" class="location" name="city" type="text" placeholder="Destination" size="90" />
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input class="input-append form-date" readonly="true" type="text" id="dpd1" placeholder="From" value="" name="arrival" data-date-format="dd/mm/yyyy">
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input class="input-append form-date" readonly="true" type="text" id="dpd2" placeholder="To" value="" name="departure" data-date-format="dd/mm/yyyy">
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input class="guests" class="date" readonly="true" type="text" id="tags2" placeholder="Ttl.Expenses" value="" name="guests" />
</div>
</div>
</div>
Input size causing the issues.
Here's my method on solving the white space.
http://www.bootply.com/PRnJqqD8S3
Your input size is way over the col-lg-2's width, that's why you got the extra spacing.
Related
I use bootstrap3. What is the correct way to align my right blue text (name) with input field below it?
<form id="myform" class="form-horizontal">
<div class="box-body">
<div class="form-group form-group-sm">
<label class="col-sm-3 form-control-static">Name</label>
<div class="col-sm-9 form-control-static">
<p class="text-primary">Samir Nasri</p>
</div>
</div>
<div class="form-group form-group-sm">
<label for="title" class="col-sm-3 form-control-static">Title<span class="mandatory"> *</span></label>
<div class="col-sm-9">
<input type="text" class="form-control" id="title" name="title" value="" placeholder="Title">
</div>
</div>
</div>
</form>
Thanks in advance.
I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW
I want to have a different forms for the identity.tpl page and registration.tpl.
But the two references on the same form page customer-form.tpl.
How can I do ?
My form is static, it works perfectly for the registration.tpl page.
custom-form.tpl :
{include file='_partials/form-errors.tpl' errors=$errors['']}
<form action="{$action}" id="customer-form" class="js-customer-form" method="post">
<section>
<div class="col-md-6 mt-15">
<div class="row">
<label for="">
Civilité <sup class="c-warning">*</sub>
</label>
<label class="ml-60 mr-20" for="">
<input name="id_gender"
type="radio"
value="1">
Monsieur
</label>
<label for="">
<input name="id_gender"
type="radio"
value="2">
Madame
</label>
</div>
<div class="row">
<div class="col-md-3 plr-0 ">
<label for="">
Nom <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input name="lastname" type="text" value="" required>
</div>
</div>
<div class="row">
<div class="col-md-3 plr-0 ">
<label for="">
Prénom <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input name="firstname" type="text" value="" required>
</div>
</div>
<div class="row obligatory">
<label for=""><sup>*</sup>Champs obligatoires</label>
</div>
</div>
<div class="col-md-6 pt-55">
<div class="row">
<div class="col-md-4 plr-0 ">
<label for="">
Adresse e-mail <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input name="email" type="email" value="" required>
</div>
</div>
<div class="row">
<div class="col-md-4 plr-0 ">
<label for="">
Mot de passe <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input
name="password"
type="password"
value=""
required >
</div>
</div>
<div class="row">
<div class="col-md-4 plr-0 ">
</div>
<div class="col-md-6 ml-10">
<label for="">
<input
name="newsletter"
type="checkbox"
value="1">
S’inscrire à la newsletter
</label>
<!-- <input class="mt-10" type="submit" value="S'INSCRIRE"> -->
</div>
</div>
<footer class="form-footer clearfix">
<input type="hidden" name="submitCreate" value="1">
{block "form_buttons"}
<button class="btn form-control-submit pull-xs-right" data-link-action="save-customer" type="submit">
S'INSCRIRE
</button>
{/block}
</footer>
</div>
</section>
</form>
identity.tpl :
{extends 'customer/page.tpl'}
{block name='page_content'}
<div class="container container-id container-perso">
<h2 class="legal">{l s='Your personal information'}</h2>
{render file='customer/_partials/customer-form.tpl' ui=$customer_form}
</div>
{/block}
identity.tpl :
{extends file='page.tpl'}
{block name='page_header_container'}{/block}
{block name='page_content_container'}
{hook h="displaySliderImg"}
<div class="container container-id container-user">
{block name='register_form_container'}
<h2 class="legal">{l s='Create an account'}</h2>
<p class="text-center mt-10">Remplissez les informations ci-dessous.</p>
<div class="row bg-grey ptb-30 plr-50 mt-90" id="registration">
<div class="col-md-12">
{$hook_create_account_top nofilter}
<section class="register-form">
{render file='customer/_partials/customer-form.tpl' ui=$register_form}
</section>
</div>
</div>
</div>
<p>{l s='Already have an account?'} {l s='Log in instead!'}</p>
{/block}
</div>
{/block}
Copy all content from customer-form.tpl to identity.tpl and registration.tpl and then make your modifications.
As advice, you should make some changes in corresponding front controller and model object too, because it has validation based on current customer-form.tpl fields. Code should be something like this:
{render file='customer/_partials/form-that-you-want.tpl' ui=$form-that-you-want}
Good luck.
In PrestaShop each page has a unique value and this value can be fetched using the following code:
$this->context->smarty->smarty->tpl_vars['page']->value['page_name']
You will get a different value from above variable on Identity and Registration page, you can pass the value of above variable through Smarty and add a condition in 'custom-form.tpl'
I have a multi-step reg form with each step in a fieldset,i am using bootstrap validator for validation.I made the 'next' button in first step to toggle validation.And it works well...
The problem i have is,i have to prevent going to next step on an error.
Now, validation works on clicking 'next'in first step but immediately passes to next step.
I want to stay there until validation is success...
How to do this?
i m giving my chunk of code...i have all libraries included...
...
<fieldset id="first_step">
<h2 class="fs-title">Create your account</h2>
<div class="form-group">
<label class="col-md-3 control-label">Username</label>
<div class="col-md-9">
<input type="text" class="form-control" name="uname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="cpwd" />
</div>
</div>
<input type="button" name="next" id="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle"></h3>
<div class="form-group">
<label class="col-md-3 control-label">*Register Number</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text1" name="reg" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">*Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text2" name="stname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-offset-3 col-md-12">
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" id="sub_but" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<script type="text/javascript">
$(".next").click(function() {
$('#msform').data('bootstrapValidator').validate();
//prevent here????
//Script to slide first fielset
}
$(".previous").click(function() {
//Script to slide back to first fieldset
}
</script>
I have bootstrap form where I need to fix two element alignment. Screenshot show the current look of the form http://s27.postimg.org/j8h3d0203/screen2.png by using the following markup
<fieldset class="col-md-8">
<div class="form-group">
<label for="BI16" class="col-md-4 control-label">Visual Acuity L:20/:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" />
</div>
<label for="BI16" class="col-md-2 control-label">R: 20/</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control"/>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B19" value1="BV8" value2="BV9"></yesno-button>
<label for="B19" class="radio-inline control-label">
Creative Lens Used?
</label>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B20" value1="BV6" value2="BV7"></yesno-button>
<label for="B20" class="radio-inline control-label">
Will the patient consent to an End of Life Planning discussion?
</label>
</div>
</div>
<div class="form-group">
<div>
<label for="B12" class="col-md-2 control-label">Comments:</label>
<div class="col-md-10">
<input type="text" id="B12" class="form-control" />
</div>
</div>
</div>
</fieldset>
Which form do you want to align? You can use
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>