I'm using following code to get a <label> with a <option> list.
<div class="row">
<div class="form-group">
<label for="sort" class="col-sm-2 control-label"> Students
</label>
<div class="col-sm-2">
<select class="form-control" name="sort" id="sort">
<option th:each="student : ${students}"
th:value="${student.status}"
th:text="${student.status}">
</option>
</select>
</div>
</div>
</div>
But in the browser I'm getting only following html, for this code snipet.
<div class="row"></div>
I'm using spring MVC with Thymeleaf.
How can I figure out this?
Related
I have to access nearest element of dropdown.
Below html have multiple dropdown and input boxes, so while select others in dropdown i have to enable and disable the nearest input box of the block.
<div class="form-block" *ngFor="let applicant of consumerData;">
<div class="form-row">
<div class="form-group">
<label class="label__select-form--hidden">Type</label>
<div class="select-dropdown">
<select class="select-menu" (change)="onTypeChange($event.target.value)">
<option value="medical">Major Medical</option>
<option value="Others">Others</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="othersLabel">Others</label>
<div class="form-textbox">
<input class="form-control" id="othersLabel" name="othersLabel">
</div>
</div>
</div>
</div>
For quick review, i have updated stackblitz.
Thanks in advance for quick solution.
Declare Template Variable in your Select Button then use the template variable to disable the input button i have edited the code try this way
<div class="form-block" *ngFor="let applicant of consumerData;">
<div class="form-row">
<div class="form-group">
<label class="label__select-form--hidden">Type</label>
<div class="select-dropdown">
<select class="select-menu" #v (change)="onTypeChange($event.target.value)">
<option value="medical">Major Medical</option>
<option value="Others">Others</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="othersLabel">Others</label>
<div class="form-textbox">
<input class="form-control" id="othersLabel" name="othersLabel" [disabled]="v.value=='Others'">
</div>
</div>
</div>
Example:https://stackblitz.com/edit/angular-2yuwyf
I want to make a form that adheres to design specifics that require me to align some fields to the left side of the viewport, and other fields that align to the right side. Here is what I have so far:
<form class="form-inline">
<div class="form-group">
<h2>Order Entry</h2>
<label for="ipt_authNum">Authorization Number</label>
<input class="form-control" type="text" id="ipt_authNum" />
</div>
<div class="form-group">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group">
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
</form>
As you can see, this block of markup makes a form where the fields are stacked on top of each other. Instead of that, I want the "Customer" and "Bill To" fields (labels included) to be across from each other on the same line (with the labels inline). Note that mobile design considerations are not required for this application; it will be a company intranet type deal where employees are only allowed to access the application via a desktop computer. Any help is greatly appreciated. Also, there are many more fields to add to this form. I just wanted to get an idea before I got too far into it. Thanks.
You can use bootstrap grid system to align labels and fields in the form. Below is the sample form. You can refer here for some examples. The important thing is the row and col-md-* classes applied to the divs for bootstrap grid system to align the form accordingly.
View the below example in full page view to see form layout. Hope this helps.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<h2>Order Entry</h2>
<div class="container">
<div class="row">
<div class="col-md-2"><label for="ipt_authNum">Authorization Number</label></div>
<div class="col-md-3"><input class="form-control" type="text" id="ipt_authNum" /></div>
<div class="col-md-7"> </div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-2">
<label for="ipt_customer">Customer</label>
</div>
<div class="col-md-3">
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="row">
<div class="col-md-2"><label for="ipt_billTo">Bill To</label></div>
<div class="col-md-4"><input class="form-control" type="text" id="ipt_billTo" /></div>
</div>
</div>
</form>
I think using one <div class="form-group"> will work. Like :
<div class="form-group">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
Maybe add some bootstrap col ?
<div class="form-group">
<div class="col-md-6">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="col-md-6">
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
</div>
.form-inline require costume width on the inputs and only applies to forms within viewports that are at least 768px wide.
https://getbootstrap.com/docs/3.3/css/#forms
You should add col classes to your elements also for better results.
I have an issue where 2/4 div's are not appearing at all in the markup when the page loads in the browser. There isn't any script/CSS involved here at all.
I have tried to isolate my markup by creating a fiddle and then trying but still can't figure out what's wrong. I have run the markup through a HTML lint as well just to be sure.
Here's my markup
<div class="form-group">
<label class="col-sm-2 control-label">Subnet</label>
<div class="col-sm-4">
<select class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-4">
<select class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Team</label>
<div class="col-sm-4">
<select class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Machine Type</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
and the fiddle is at - https://jsfiddle.net/zpsygxsq/4/
Can someone take a look and advise?
Use Apporopriate tag and complete that.... Select tag is not autocomplete tag.. it must be closed in html... So use
<select class="form-control"></select>
Instead Of
<select class="form-control" />
Checkout Your Following Snippest With Correction
<div class="form-group">
<label class="col-sm-2 control-label">Subnet</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Team</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Machine Type</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
Its becasue your self closing the select tags.
proper markup is.
<select class="form-control"></select>
not
<select class="form-control" />
It looks like there is no content /text in your structure that may be the reason.
Is it possible to insert a form with select element inside horizontal form in Bootstrap.
I need to insert a form with select element inside form group.
Bootply code here
Note: Bootply messes the code and remove some form tags, so copy the code below.
The problem the element becomes not aligned. The two selects for Country and Language in the code not aligned and messes the code after them.
The code is here again:
<div class="container-fluid">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<form>
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</form>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<form>
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</form>
</div>
</div>
</form>
</div>
You have multiple <form></form> values in your code. Since this is only one form all you need is the form class at the beginning and the close at the end. This is why it's becoming misaligned. Check out my fiddle
http://jsfiddle.net/jxe78828/
According to the HTML5 specs, you can't nest one form inside another:
4.10.3 The form element
...
Content model:
Flow content, but with no form element descendants.
Bootstrap is designed with the assumption that you will be using valid HTML structure. So you may want to rethink your HTML structure and if there is another way to accomplish what you are trying to do with nested <form> elements.
Try this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</div>
</div>
</form>
</div>
You can also see my JSFiddle here
After a lot of search with people answering without reading the question clearly and misunderstanding what I need. Clearly the question means I need separate forms or sub forms inside forms, this can be possible with HTML 5 attribute form in this way:
<select name="country" id="country" class="form-control" form="country-form">
where you can just put empty form any where like this:
<form id="country-form"></form>
or even this form does not exist, the above form field will not be included anyway when submitting the container form.
I was hoping if someone can inform me what I need to do to get the placeholders in the input box for the dates to fit properly.
I've been playing around with the bootstrap code, but can't fit it in properly.
Here is my screen shot:
Here is my code using horizontal forms:
<div class="container nopadding">
<div class="form-group">
<label class="col-sm-2 control-label" for="txtPISIQueueManufacturer">Manufacturer:</label>
<div class="col-sm-2">
<input type="text" class="form-control height-auto" id="txtPISIQueueManufacturer" placeholder="Enter Manufacturer" />
</div>
<label class="col-sm-2 control-label" for="ddlPISIQueueRequestType">Request Type:</label>
<div class="form-group col-sm-3">
<select class="form-control" id="ddlPISIQueueRequestType">
<option>Shipping Information</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="form-group col-sm-8">
<label class="control-label col-sm-offset-1">Requested Date:</label>
<input class="height-auto" id="dtePISIQueueRequestedFromDate" placeholder="From Date" type="text" />
<span class="label label-default">To:</span>
<input class="height-auto" id="dtePISIQueueRequestedToDate" placeholder="To Date" type="text" />
</div>
</div>
Your problem lies in your css properties for your input type["text"] or date or any of the sort. Use your browser inspector and look for an excessive padding or line height in your input fields.