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
Related
Is it ok to put <h3> inside <form> like below ?
<form>
<h3>Business Information</h3>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="TypeOfEntity" class="form-font">Type of Entity</label><br>
<select class="form-control" id="TypeOfEntity">
<option selected disabled >Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="NoOfDirection" class="form-font">No of Direction</label><br>
<select class="form-control" id="NoOfDirection">
<option selected disabled >Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="EntityName" class="form-font">Entity Name</label><br>
<input class="form-control" id="EntityName" placeholder="Select">
</div>
</div>
</div>
</form>
You can allways check validation on validator.w3.org
In my opinion you can put it inside or outside of the form tag.
Depending on how reusable your component will be.
If you use same form in multiple places but you want to change the title than put it outside the form. Else you can leave it inside the form tag.
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'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?
I'm experiencing an odd behaviour in Bootstrap where a col-sm-6 is expanding on top of the sibling column above it, which renders the sibling column unclickable.
Please see source code and live demo here: Codepen
Resize the output window to xs size (below 768px) to experience the issue).
The checkbox for 'As above' is unclickable because the phyiscal address 'Address line 1' is expanding above it, creating a sort of barrier.
The issue can be solved by adding 'col-xs-12' in addition to the 'col-sm-6', but Bootstrap should figure this one out by itself without this (as it normally does). Any ideas what is causing this?
EDIT:
One could argue that I should put all my fields in different rows, but for various reasons I'd like to keep everything within one row and let Bootstrap figure out the flow of the items, which normally works fine.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Postal address</h3>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPostalAddressLine1" required="" data-parsley-required-message="Please enter your postal address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPostalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalState">State*</label>
<select class="form-control" id="inputPostalState" required="" data-parsley-required-message="Please select the state from the dropdown.">
<option value="">Please Select</option>
<option value="nsw">NSW</option>
<option value="nt">NT</option>
<option value="qld">QLD</option>
<option value="sa">SA</option>
<option value="tas">TAS</option>
<option value="vic">VIC</option>
<option value="wa">WA</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPostalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPostalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
<div class="col-xs-12">
<h3>Physical address</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="checkbox checkbox-default">
<label>
<input type="checkbox" value="" id="use-postal-address" data-parsley-multiple="use-postal-address">
<span class="icon"></span>
<span class="text">As above (use postal address)</span>
</label>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label for="inputPhysicalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine1" required="" data-parsley-required-message="Please enter your physical address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalState">State*</label>
<input type="text" class="form-control" id="inputPhysicalState" value="NSW" disabled="disabled">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPhysicalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPhysicalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
</div>
</div>
I think you're not clearing your floats properly across media queries.
Add .col-sm-6{overflow:hidden} to see if it solves it, then try to clear your floats whenever possible.
Also, read up on this, it might be helpful
I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
<div>
<input id="memory" type="text" class="form-control">
</div>
<div class="col-lg-4">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</div>
</div>
</form>
Ok, this is how I would do it.
First add the form-inline class to your form.
Then remove the col-lg classes from labels and inputs.
Also remove all un-needed divs too, which results in the below html:
Markup
<form class="form-inline well" >
<div class="form-group">
<label class="control-label">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Screen grab
If you want your form-fields to align horizontally - you can actually use the inline form. eg:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="memory">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Note: not tested in an actual browser...