I have the following Bootstrap markup and and screen shot below. I want the entire group of (4) items to appear in one line and not to break. I've been tweaking for a couple hours and cannot make it happen. Is it possible to get them to all align in 1 row?
<div class="container-fluid">
<div id="sys-page-headerBar-container">
<div class="row">
<!--<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> <!-- left gutter -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- header -->
<form class="form-horizontal" method="post">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="report_date">Service Date(s):</label>
<div class="col-md-2" id="dispatchLog-container">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" value="<?php echo date( DATE_SZ, strtotime( "today" ) ); ?>" tabindex="1" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" value="<?php echo date( DATE_SZ, strtotime( "today" ) ); ?>" tabindex="2" />
</div>
</div>
<label class="col-md-2 control-label" for="report_time">Service Time:</label>
<div class="input-group bootstrap-timepicker timepicker col-md-1">
<input id="timepicker" type="text" class="form-control input-small" data-minute-step="30" name="tour_time" tabindex="3"><input type="hidden" id="tour_time_value" value="<?php echo date( DATE_TP, strtotime( "12:00 AM" ) ); ?>">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<label class="col-md-1 control-label" for="report_order">Sort Order:</label>
<div class="col-md-1">
<select id="report_order" name="report_order" class="form-control" tabindex="4">
<option></option>
</select>
</div>
<div class="col-md-1">
<button id="submit" name="submit" class="btn btn-default" value="1" tabindex="5">Go</button>
</div>
</div>
</fieldset>
</form>
</div> <!-- .col-xs-10.col-sm-10.col-md-10.col-lg-10 -->
<!--<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> <!-- right gutter -->
</div> <!-- .row -->
</div> <!-- #sys-login-container -->
</div> <!-- .container-fluid -->
One of the things to learn about bootstrap is when to not use bootstrap :-)
In your case just use your own css.
You can:
float them all;
make them all in-line-block
use flexbox with a fallback for older IE (IE Conditional css) to one of the above methods
Flexbox is probably what I'd use http://caniuse.com/#feat=flexbox, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ but inline-block might just do it; In any case you can use your own media queries to change the display format if you need to.
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.
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'
This is strange. For some reason, this fails:
<div asp-validation-summary="ValidationSummary.ModelOnly"></div>
But this one works just fine:
<div asp-validation-summary="All"></div>
Any one would know why? Here is entire code snippet:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>Login</h3>
<form method="post" novalidate>
<div asp-validation-summary="All"></div>
#*<div asp-validation-summary="ValidationSummary.ModelOnly"></div>*#
<div class="form-group">
<label asp-for="Username"></label>
<input type="text" asp-for="Username" class="form-control" />
<span asp-validation-for="Username"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input type="password" asp-for="Password" class="form-control" />
<span asp-validation-for="Password"></span>
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-success" />
</div>
</form>
</div>
I'm assuming you are using asp.net core 1.0. The value for the validation-summary tag helper was changed from
<div asp-validation-summary="ValidationSummary.ModelOnly"></div>
to simply
<div asp-validation-summary="ModelOnly"></div>
You did it correclty with All ;-)
asp.net core docs
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>