I am designing a view like this:
#for($i=1;$i<=10;$i++)
<div class="col-xs-12">
<label class="control-label">Home</label>
<select class="form-control" name="homeTeam" >
<option value="1">Arsenal</option>
<option value="2">Chelsea</option>
<option value="3">Man Utd</option>
</select>
</div>
<div class="col-xs-12">
<label class="control-label">Away</label>
<select class="form-control" name="awayTeam" >
<option value="1">Arsenal</option>
<option value="2">Chelsea</option>
<option value="3">Man Utd</option>
</select>
</div>
<div class="col-xs-12">
<label class="control-label">Kick-Off</label>
<input class="form-control form_datetime col-xs-12" size="16" type="text" value="" readonly>
</div>
#endfor
When I test this on normal display with sufficient width, it works ok. But when I reduce the size of the browser to match the col-xs range the input fields do stack up but become unclickable.
I am not sure why this is happening and whats the solution, tried different things nothing worked.
Related
I have two independent dropdowns in a form. Below is the code:
<form v-on:submit.prevent="submitForm">
<div>
<label for="tenant">Tenant</label>
<select
class="form-select"
name=""
id="tenant_id"
v-model="formValues.tenant_id" >
<option disabled value="">Select Tenant</option>
<option value="" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
</select>
</div>
<div>
<label for="chart_type">Type</label>
<select
class="form-select"
name=""
id="chartOf"
v-model="formValues.chartOf"
>
<option disabled value="">Type</option>
<option value="diagnosis">Diagnosis</option>
<option value="symptom">Symptom</option>
<option value="comorbidity">Comorbidity</option>
</select>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Method for submitting form :
submitForm(){
console.log('Form values: ', this.formValues)
}
When I select Tenant(1st dropdown), it's fine But when I select 2nd dropdown, the first dropdown resets to the default position(Select Tenant).
I am not able to understand what's happening, as I started learning vue few days ago.
The option value should be bound to field like id :
<option :value="tenant.id" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
I'm trying to set one of the options that is in an IEnumerable as diasabled within the Razor page. The reason for wanting it to be in the list but disabled is that the database will hold the StatusId but I need the user to choose one of the other options but for the database Status to be selected when the page loads.
This is the Razor syntax I'm using and it's populating the list as expected.
<div class="form-group col-md-6">
<label asp-for="#Model.Status" class="control-label"></label>
<select class="form-control" asp-for="#Model.Status" asp-items="#(new SelectList(Model.Statuses, "StatusId", "Description"))">
<option disabled>Select Status</option>
</select>
<span asp-validation-for="#Model.Status"></span>
What I am looking to do is have an item (it's got an StatusId of 0) set as disabled. How can this be achieved in code?
I would like the resulting HTML to look something like this
<div class="form-group col-md-6">
<label class="control-label" for="Description">Description</label>
<select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
<option disabled>Select Status</option>
<option value="1">Status 1</option>
<option value="5">Status 2</option>
<option value="99">Status 3</option>
<option disabled selected="selected" value="0">Not Selectable Status</option>
</select>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
Is this achievable?
Thanks
You can try with foreach loop to build the options. I exactly don't know the property names so I took Disabled, Value, Text (you can modify as per your model)
PS: correct if there are any syntax errors
<div class="form-group col-md-6">
<label class="control-label" for="Description">Description</label>
<select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
<option disabled>Select Status</option>
#foreach(var s in Model.Statuses)
{
if (s.Disabled)
{
<option disabled value="#s.Value">#s.Text</option>
}
else
{
<option value="#s.Value">#s.Text</option>
}
}
</select>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
I have code like below. How to make buttons in-line with input ? Now buttons are inline with adjacent column and looks ugly. Live demo here
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="x" class="control-label">Function</label>
<input type="text" id="x" class="form-control" placeholder="x"/>
</div>
</div>
<div class="col-md-1">
Get
</div>
<div class="col-md-1">
Stat
</div>
</div>
You can use an input group (though bootstrap say you shouldn't use input groups with selects because it doesn't always behave)
http://getbootstrap.com/components/#input-groups-buttons
edit: for the label above the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<label for="x" class="control-label">Function</label>
<div class="input-group">
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
or for the label as part of the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<div class="input-group">
<span class="input-group-addon"><label for="x" class="control-label">Function</label></span>
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
I added an update to your fiddle:
input above group: http://jsfiddle.net/ced7k0hq/11/
input as part of group: http://jsfiddle.net/ced7k0hq/12/
From the bootstrap docs: http://getbootstrap.com/components/#input-groups
Textual <input>s only
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.
thanks #ovitinho for comment about joining the two anchors inside a single input-group-btn :D
I'm trying to get hands over Bootstrap 3 and I'm kindof struggling with the new classes for the grid. Previous versions of Bootstrap let you set the width of a input by adding the span-* class so if you wanted to put two inputs on the same form column, adding span-2 and span-10 did the job. I'm trying to do this with bootstrap 3 but I don't get the same result as you can see in this fiddle, I want to set the select and the input on the same col. I want the labels at top of the inputs so adding the inline class to the form don't work.
What I'm missing here?
Cheers and thanks in advance
http://jsbin.com/esewOyo/1/
Most people can't believe how many classes are involved but form-control is always 100% so each one must go inside a col-- class and if you want to put elements on the same row, in this situation, then you'd use a nested row with columns as follows:
<div class="container">
<form role="form">
<div class="row my-row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label> </label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
</div>
</form>
</div>
Because the gutter is too wide for my taste:
.row.my-row, .row.my-row .row {
margin-left:-1%;
margin-right:-1%
}
.row.my-row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.row.my-row .row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
They've provided the example markup for a regular input-text form:
<form class="form-horizontal">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</form>
But how could I get something like
Just a bit confused on how the markup would look for a select list. Thanks!
Bootstrap 2.3.2:
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Select:</label>
<div class="controls">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>
Bootstrap 3.x:
<form role="form" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-sm-2 control-label">Select:</label>
<div class="col-sm-3">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</fieldset>
</form>
col-sm-2 and col-sm-3 define the widths for you can change accordingly. Have a look at the Grid system on the Bootstrap site to see the different variations.
Hope this helps
The answer by Lodder is correct for Bootstrap 2.x, but it will not work for Bootstrap 3. This will work Bootstrap 3:
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="control-label col-lg-2">Select:</label>
<div class="col-lg-3">
<select class="form-control">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>
And work without value - Bootstrap 3.
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="control-label col-lg-2">Select:</label>
<div class="col-lg-3">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>