Using bootstrap 4 alpha 6
I have a contact form that is supposed to look like this:
Using the following code, I am able to get two columns of 6, but the fields are all wrong. This is the code for the section:
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<hr width="30%">
<p>Need to get in touch? Fill in the form below for more information</p>
</div>
</div>
<div class="row">
<form class="form-inline col-md-12" role="form">
<div class="col-md-6">
<fieldset class="form-group">
<input type="email" class="form-control" id="email" placeholder="email...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="name" placeholder="name...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="subject" placeholder="subject...">
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="form-group">
<textarea name="" id="message" rows="3" class="form-control" placeholder="message..."></textarea>
</fieldset>
<button type="submit" class="btn btn-outline-info btn-block">Submit</button>
</div>
</form>
</div>
</div>
</section>
This is what the form looks like with the above code:
As you can see, the columns are split correctly, but the fields are not populating the entire width of the columns. I looked at it in firebug, and it shows the form-inline class having a width: auto.
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
width: auto;
}
If I shut off width: auto; in firebug, then the controls populate the full width of the six columns. I can fix this in my own stylesheet by adding a new class and doing this:
.contact-control
{
width: 100% !important;
}
I am just wondering if there's a better way to do it, using existing classes in bootstrap.
I think it must be better to use div with class form-group rather than fieldset.I hope this may help.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2><b>Contact Us</b></h2>
<hr width="30%">
<p>Need to get in touch? Fill in the form below for more information</p>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<textarea type="text" class="form-control" id="subject" rows="4" aria-describedby="emailHelp" placeholder="Subject" ></textarea>
</div>
<button type="submit" class="btn btn-outline-info btn-block">Submit</button>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
I case if you add form tag to it and it not work. I have very good example here, with any CSS
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="heading">Utvärderingsformulär RETTS Nära Pilot - (Tranås VC)</h4>
<hr>
</div>
</div>
<form id="datainsamlingForm" method="POST" target="no-targer">
<div class="row">
<div class="col-md-6">
<label class="control-label">App version number</label>
<select class="form-control">
<option>Version 1</option>
<option>Version 2</option>
<option>Version 3</option>
</select>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Push Message</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<input type="text" class="form-control" id="inputSuccess1">
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<label class="control-label">Content</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<select class="form-control">
<option>Offer 1</option>
<option>Offer 2</option>
</select>
</div>
<div class="col-md-6">
<label class="control-label">Play sound</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<select class="form-control">
<option>Sound 1</option>
<option>Sound 2</option>
<option>Sound 3</option>
</select>
</div>
</div>
<div class="row">
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Publish date/time</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Expire date/time</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<h2>
<a type="button" class="btn btn-custom btn-lg">Publish</a>
</h2>
</div>
</div>
<hr>
</form>
</div>
Related
I'm trying to get a full width button inside my materialize css card and I've achieved the following result so far.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]">
</p>
<div class="mathquill-embedded-latex mathquill-rendered-math"><span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"><br>
<span class="text">Miles to destination</span> <input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span> <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;">
</div>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</article>
</div>
</div>
</div>
</div>
But the issue is the button is not inside the card and only half. Any help is appreciated.
Add row to the 4th div which is with the class name card-content
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content row">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]"></p>
<div class="mathquill-embedded-latex mathquill-rendered-math">
<span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"/><br>
<span class="text">Miles to destination</span>
<input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span>
<input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;"><br>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</div>
</article>
</div>
</div>
</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 am integrating Bootstrap 3 with Kendo UI controls.
I am having alignment issues with multiple form-horizontal sections, here is the HTML
<ul id="acc-form-panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">Project Info</span>
<section style="padding:10px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="procod">Project Code</label>
<div class="col-sm-8">
<input id="procod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="proshocod">Project Short Code</label>
<div class="col-sm-8">
<input id="proshocod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-horizontal form-widgets col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2" for="protit">Project Title</label>
<div class="col-sm-10">
<input id="protit" style="width: 75%;" />
</div>
</div>
</div>
</section>
</li>
<li class="">
<span class="k-link">Users Info</span>
<div class="row" style="margin: 20px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name</label>
<div class="col-sm-8">
<input id="name" value="Bilal Haidar" style="width: 75%;" /> <!-- styles="width:100%;" -->
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="birthday">Birthday</label>
<div class="col-sm-8">
<input id="birthday" type="date" value="10/09/1979" style="width: 75%;" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="gender">Gender</label>
<div class="col-sm-8">
<select id="gender" style="width: 75%;"><option value="Male" selected="selected">Male</option><option value="Female">Female</option></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="language">Language</label>
<div class="col-sm-8">
<select id="language" style="width: 75%;"><option value="English" selected="selected">English</option><option value="German">German</option></select>
</div>
</div>
</div>
</div>
</li>
</ul>
Anyone can tell me what's wrong with the alignment?
Thanks
First I will advice you strip your code of all inline styles, and the put every successive that should be on the same column in a div / section of class row. Bootstrap is based on the 12-grid system. That means once 12 columns are complete, the last element is dropped to a new line. Try these and see what will happen.
I have a ion content that I fill with a div. This works great when the screen size is larger than the div content. If it is smaller, then it assigns the height of the view, and when you scroll down it doesn't fill the whole content. It can be seen in the following example:
This is basically the html:
<ion-header>
<div id="headerTab" [class]="loginStyle">
<ul style="justify-content: center; display: flex;" class="tabs z-depth-1">
<li class="tab col"><a (click)="setTabIndex(0)" class="active" href="#enter">ENTRAR</a></li>
<li class="tab col"><a (click)="setTabIndex(1)" href="#signup">REGISTRO</a></li>
</ul>
</div>
</ion-header>
<ion-content>
<div id="background" [class]="loginStyle" style="margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center;">
<div class="valign-wrapper center-align tabs-content" *ngIf="loginTabVisible" [#showAnimation] (#showAnimation.done)="reloadTabs()">
<form *ngIf="loginVisible" [#showAnimation] (#showAnimation.done)="reloadLoginPage()">
<div class="row">
<div class="input-field col s12">
<input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
<label for="correo">Email</label>
</div>
<div class="input-field col s12">
<input id="pass1" type="password" class="validate" [(ngModel)]="userPassword" name="userPassword">
<label for="pass1">Contraseña</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a class="btn bg_color_s" (click)="login()">Continuar</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="setLoginPageIndex(1)" class="">¿Olvidaste tu contraseña?</a>
</div>
</div>
</form>
<form *ngIf="resetPasswordVisible" [#showAnimation] (#showAnimation.done)="reloadLoginPage()">
<div class="row">
<div class="input-field col s12" style="color: #fff">
<p> Por favor, introduzca su correo. Le enviaremos un email con insrucciones para restablecer su contraseña </p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
<label for="correo">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a class="btn bg_color_s" (click)="login()">Recuperar contraseña</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="setLoginPageIndex(0)" class="">Volver al inicio de sesión</a>
</div>
</div>
</form>
</div>
<div class="center-align tabs-content" *ngIf="registerTabVisible" [#showAnimation] (#showAnimation.done)="reloadTabs()">
<form *ngIf="registerVisible" [#showAnimation] (#showAnimation.done)="reloadRegisterPage()">
<div class="row">
<div class="input-field col s12">
<input name="newUser.firstName" [(ngModel)]="newUser.firstName" id="first_name" type="text" class="validate">
<label for="first_name">Nombres</label>
</div>
<div class="input-field col s12">
<input name="newUser.lastName" [(ngModel)]="newUser.lastName" id="last_name" type="text" class="validate">
<label for="last_name">Apellidos</label>
</div>
<div class="input-field col s12">
<input name="newUser.birthday" [(ngModel)]="newUser.birthday" id="birthday" type="text" class="validate datepicker">
<label for="birthday">Fecha de nacimiento</label>
</div>
<div class="input-field col s12">
<input name="newUser.email" [(ngModel)]="newUser.email" id="correor" type="email" class="validate">
<label for="correor">Email</label>
</div>
<div class="input-field col s12">
<input name="password" [(ngModel)]="newUser.password" id="passr1" type="password" class="validate">
<label for="passr1">Contraseña</label>
</div>
<div class="input-field col s12">
<input name="passwordCheck" [(ngModel)]="passwordCheck" id="passr2" type="password" class="validate">
<label for="passr2">Repita contraseña</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="signUp()" class="btn bg_color_s">continuar</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
</div>
</div>
</form>
<form *ngIf="proTypeVisible" [#showAnimation] (#showAnimation.done)="reloadRegisterPage()">
<div class="row">
<div style="width:90%;margin:auto">
<p>
<label>
<input name="group1" type="radio" />
<span>Jugador Profesional</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Campo de Golf/Pitch and putt</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Tienda de Golf</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Otros servicios relacionados</span>
</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
continuar
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
</div>
</div>
</form>
</div>
</div>
</ion-content>
The problem can be summed up to:
<ion-content>
<div style="height:100%; background-color: red">
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
</div>
</ion-content>
The problem is that the content overflows the div. We can make use of overflow: overlay to solve the issue.
Simply add in the container div this property:
<ion-content>
<div style="height:100%; background-color: red; overflow: overlay">
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
</div>
</ion-content>