I have this piece of code in my meteor application.
Meteor version is : Meteor 1.0.3.1
The code well formatted as required by blaze template. But I don't understand this problem.
I was able to use quickForm of autoform package but not able to use autoform.
<template name="register">
{{> autoForm collection="Users" id="addUserForm" type="insert"}}
<fieldset>
<legend>Register</legend>
<div class="form-group">
<label for="inputFirstName" class="col-lg-2 control-label">First Name</label>
<div class="col-lg-10">
{{> afFieldInput name="firstName" class="form-control" id="inputFirstName"}}
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-lg-2 control-label">Last Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="inputPass" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPass" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="inputMobileNum" class="col-lg-2 control-label">Mobile Number</label>
<div class="col-lg-10">
<input type="tel" class="form-control" id="inputMobileNum" placeholder="Mobile Number" />
</div>
</div>
<div class="form-group">
<label for="inputDOB" class="col-lg-2 control-label">Date of Birth</label>
<div class="col-lg-10">
<input type="date" class="form-control" id="inputDOB" placeholder="Date of Birth" />
</div>
</div>
<div class="form-group">
<label for="bgroup" class="col-lg-2 control-label">Blood Group</label>
<div class="col-lg-10">
<select class="form-control" id="bgroup">
<option>A+</option>
<option>A-</option>
<option>B+</option>
<option>B-</option>
<option>AB+</option>
<option>AB-</option>
<option>O+</option>
<option>O-</option>
</select>
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select class="form-control" id="country">
<option>India</option>
</select>
</div>
</div>
<div class="form-group">
<label for="state" class="col-lg-2 control-label">State</label>
<div class="col-lg-10">
<select class="form-control" id="state">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="city" class="col-lg-2 control-label">City</label>
<div class="col-lg-10">
<select class="form-control" id="city">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
{{/autoForm}}
</template>
I am getting following error:
While building the application:
register.html:96: Unexpected closing template tag
... </div> {{/autoForm}}
Have a look at the Spacebars syntax.
{{> template ... }} means, put the contents of "template" there. There's no closing tag; it's just a one-line inclusion.
{{# block ... }} on the other hand, is a block helper, which has content and a matching closing tag {{/block}}. The most popular block helper is each:
{{#each players}}
{{> player}}
{{/each}}
So you don't need {{/autoform}}.
Related
I was looking up this style on bootswatch: https://bootswatch.com/simplex/
And especially looked for styling forms, like here:
But when I add the code that you get when clicking on the little red icon in the top right of the form example on bootswatch to my website, it looks like this:
So the text labels and input fields have a line break inbetween them, the a little darker shaded background box isnt shown and other things are misaligned, too. How does that come?
This is the entire code of my Page:
#model WebProto.ViewModels.NewChartConfigViewModel
#using MaschinenModell;
#{
ViewBag.Title = "Neues Diagramm";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Selects</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
Okay im so flipping stupid. Its because I displayed the webpage I created in internet explorer. My fault! :D
Firefox, Opera and Chrome show it correctly.
I'm doing an application with Rails and AngularJS which have a form with a select list, the problem it's that it looks pretty ugly, because the width is too large for the options it have.
Here's my form with some sample values
How can I shorten the width of the select list without distorting the rest of the form?
Here's the code of my form
<h1>Create Form</h1>
<form ng-submit="addPoll()" style="margin-top:30px;">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="title"></input>
</div>
<div class="form-group">
<label>Description</label>
<textarea type="text" class="form-control" ng-model="description"></textarea>
</div>
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}" >{{group.name}}</option>
</select>
</div>
<div class="form-group">
<label>Welcome Message</label>
<textarea type="text" class="form-control" ng-model="initial_message"></textarea>
</div>
<div class="form-group">
<label>Outgoing Message</label>
<textarea type="text" class="form-control" ng-model="final_message"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="allow_anonymous_answer"> Allow Anonymous Answer
</label>
</div>
<button type="submit" class="btn btn-primary" style="float: right;">Continue</button>
</form>
You can do it a few different ways. You can either add an inline style to the div.form-group or use Bootstrap's grid system. Here's two examples:
<div class="form-group" , style="width: 200px">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
</div>
</div>
JSFiddle
I have troubles with creating a "form-horizontal" with bootstrap.
http://jsfiddle.net/frauger/jo0b6yod/
As you can see in the jsfiddle the label "date of birth" is not correctly aligned above the "date of birth select"
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
Thanks
Wrap all of your existing select divs in a new container div that has the form-group class.
<div class="form-group">
<div class="col-xs-4">
<select type="text" class="form-control" id="field-day" required>
<option>DD</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-month" required>
<option>MM</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-year" required>
<option>YYY</option>
</select>
</div>
</div>
working fiddle:
http://jsfiddle.net/jo0b6yod/2/
Include the label within div tag, that should make the label within a block level, and takes of 100% of its parent.
ex:
<div class="form-group">
<div><label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label></div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
I have this horizontal form (from the docs example).
I'd like to add radiobutton before the labels, and also a dropbox to the right. So I need a four (aligned) column horizontal form. Whats the best way to do this?
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
radio and drop-down next to label
change form type to form-inline
before any label, just do this :
<input type="radio" class="" placeholder="" name="radio_btn" />
<label for="inputEmail3" class="col-sm-2 control-label inline-show ">Email</label>
<select>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
How to vertically align label and input in Bootstrap 3? I would like both the label and input on same line. I have played around with different classes and custom CSS but nothing seems to work.
The JSfiddle
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The bootstrap 3 docs for horizontal forms let you use the .form-horizontal class to make your form labels and inputs vertically aligned. The structure for these forms is:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
Therefore, your form should look like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
When input-lg is used, margins mismatch unless you use form-group-lg in addition to form-group class.
Its example is in docs:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
None of these solutions worked for me. But I was able to get vertical centering by using <div class="form-row align-items-center"> for each form row, per the Bootstrap examples.
The problem is that your <label> is inside of an <h2> tag, and header tags have a margin set by the default stylesheet.
This works perfectly for me in Bootstrap 4.
<div class="form-row align-items-center">
<div class="col-md-2">
<label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
</div>
<div class="col-md-10">
<input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
/div>
</div>