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.
Related
My form is to be capable of switching between view and edit modes. By default the form should display in view mode and when I click edit button the fields should be available for change. The form is working good between view and edit modes as expected, but in view mode the span element (for display value) is misaligned with the label, I mean the span element's value is displaying a bit higher to the horizontal line of the label.
Below is a piece of code from my form:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<span class="control-label" *ngIf="!editMode">{{model.name}</span>
<div class="col-sm-6" *ngIf="editMode">
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Use a form static control instead of a <span> element:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6" *ngIf="editMode">
<p class="form-control-static" *ngIf="!editMode">{{model.name}}</p>
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Here is a "static" Bootstrap snippet (view in full page):
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<input class="form-control" type="text" name="name" value="model name" />
</div>
</div>
</form>
</div>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static">model name</p>
</div>
</div>
</form>
</div>
It works now. Thanks for the help. However I have modified the code to meet my requirement and it's as below.
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static" *ngIf="!editMode">{{var1}}</p>
<input class="form-control" *ngIf="editMode" type="text" name="var1" [(ngModel)]="var1" />
</div>
</div>
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 simple form and want it to be horizontal on medium an large devices and vertical on small devices with twitter-bootstrap-3.
I got it working responsive, but it's not switching to vertical style on small devices.. Isn't that possible?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-horizontal">
<div class="form-group">
<label for="telefon" class="control-label col-xs-3">Telefon</label>
<div class="col-xs-8">
<input type="text" name="telefon" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-xs-3">Email</label>
<div class="col-xs-8">
<input type="email" name="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
http://jsfiddle.net/quyw5fnL/
EDIT:
I want it to look like this on large screens:
Label1: Inputbox1
Label2: Inputbox2
And on small Screens like this:
Label1:
Inputbox1
Label2:
Inputbox2
Just realized that there was never a correct answer given. Perhaps it's just to easy, but for the sake of completion and all who are stumbling over this, here is the simple answer:
<form method="POST" action="...something..." class="form-horizontal">
<div class="form-group">
<label for="" class="col-xs-12 col-sm-3 control-label">Name</label>
<div class="col-xs-12 col-sm-9">
<p class="form-control-static">John Muller</p>
</div>
</div>
<div class="form-group">
<label for="town" class="col-xs-12 col-sm-3 control-label">Town</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="town" class="form-control " placeholder="" value="New York">
</div>
</div>
<div class="form-group">
<label for="something" class="col-xs-12 col-sm-3 control-label">Something else</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="something" class="form-control " placeholder="" value="Got it">
</div>
</div>
</form>
The important part is to set col-xs-12 and col-sm-3 on the label and col-xs-12 and col-sm-9 on the input.
Fiddle
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-inline">
<div class="form-group">
<label for="telefon" class="">Telefon</label>
<input type="text" name="telefon" class="form-control">
</div>
<div class="form-group">
<label for="email" class="">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
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>
I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>