I need to figure out how to order by date ascending and how I can add search to my list.
Here is example structure: https://jsfiddle.net/franso/jr7dsef3/
<div id="app">
<input type="text" v-model="search" placeholder="Search">
<select v-model="title">
<option value="Show all">Show all</option>
<option value="Title 1">Title 1</option>
<option value="Title 2">title 2</option>
</select>
<select v-model="name">
<option value="Show all">Show all</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
<div class="list" v-for="post in filteredAndOrdered">
<div class="list__wrapper">
<div class="list__item">{{ post.title }}</div>
<div class="list__item">{{ post.name }}</div>
<div class="list__item">{{ post.FinalApplicationDate }}</div>
</div>
</div>
</div>
You can use array.sort() for sorting date and use #change function on input tag for using search
Sort Javascript Object Array By Date
Related
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'm trying to get a form of 9 dropdowns using the Bootstrap-select plugin.
The dropdowns appear in three columns.
Every dropdown has a label.
Every dropdown has a erase button (input-group-btn).
You can select multiple options for the dropdowns.
Now when I select many options in the left dropdown, the list of options overflows the label of the dropdown right to it.
Is it possible to cut off the list of options so that all content besides the dropdown stays visible?
I supposed the option "dropdown-align-right" whould do the job, but it seems not to work in my example.
I use bootstrap 3.3.7, bootstrap-select 1.12.1 and jquery 1.9.1.
Below is the code:
`<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="select_1" class="control-label col-md-5">Select 1</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_1" name="select_1" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_2" class="control-label col-md-5">Select 2</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_2" name="select_2" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_3" class="control-label col-md-5">Select 3</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_3" name="select_3" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_4" class="control-label col-md-5">Select 4</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_4" name="select_4" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_5" class="control-label col-md-5">Select 5</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_5" name="select_5" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_6" class="control-label col-md-5">Select 6</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_6" name="select_6" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_7" class="control-label col-md-5">Select 7</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_7" name="select_7" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_8" class="control-label col-md-5">Select 8</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_8" name="select_8" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_9" class="control-label col-md-5">Select 9</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_9" name="select_9" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>`
With the help of my mother, I found a solution for my problem.
I did not succeed to cut of the list of options. Instead I added a custom text that shows the first option followed by "...".
First, I added id's to the input-groups and set the data-container property so that the dropdowns stay in their columns when selecting more and more options.
Second, I added some javascript to set the selectedTextFormat and countSelectedText properties to show the first option followed by "..." when selecting more than one option.
See the code below:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selectpicker").each(function() {
var self = this;
$(self).selectpicker({
"selectedTextFormat": "count>1",
"countSelectedText": function(count,total) {
return $(self).val()[0] + " ...";
}
});
}); // end each
}); // end ready
</script>
</head>
<body>
<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="select_1" class="control-label col-md-5">Select 1</label>
<div class="col-md-7">
<div id="select_1_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_1_container" id="select_1" name="select_1" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_2" class="control-label col-md-5">Select 2</label>
<div class="col-md-7">
<div id="select_2_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_2_container" id="select_2" name="select_2" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_3" class="control-label col-md-5">Select 3</label>
<div class="col-md-7">
<div id="select_3_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_3_container" id="select_3" name="select_3" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_4" class="control-label col-md-5">Select 4</label>
<div class="col-md-7">
<div id="select_4_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_4_container" id="select_4" name="select_4" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_5" class="control-label col-md-5">Select 5</label>
<div class="col-md-7">
<div id="select_5_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_5_container" id="select_5" name="select_5" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_6" class="control-label col-md-5">Select 6</label>
<div class="col-md-7">
<div id="select_6_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_6_container" id="select_6" name="select_6" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_7" class="control-label col-md-5">Select 7</label>
<div class="col-md-7">
<div id="select_7_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_7_container" id="select_7" name="select_7" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_8" class="control-label col-md-5">Select 8</label>
<div class="col-md-7">
<div id="select_8_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_8_container" id="select_8" name="select_8" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_9" class="control-label col-md-5">Select 9</label>
<div class="col-md-7">
<div id="select_9_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_9_container" id="select_9" name="select_9" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
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.
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
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>