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>
Related
Vuelidate is not able to validate a Select/Dropdown element?
HTML
<div :class="{ 'form-group--error': $v.subscription.$error }">
<label for="">Year Subscription</label>
<select name="subscription" #change="subscriptionChange()" v-model="$v.subscription.$model" class="custom-select" id="inputGroupSelect04">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS Code
subscription : {required }
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
I am trying to select an option from a dropdown which in a form in web page with Selenium webdriver using VBA. There are 8 checkbox each checkbox gives 2 or 3 dropdown to select, Checkbox 3 and 4 has the same option so I am unable to select the 2nd option in 4th checkbox.
bot.FindElementsByCss(".bs-FilterControl-item-checkbox")(4).Click ' to select 4th checkbox it works
bot.FindElementByXPath("//*[#value='false']").Click ' this code selects the 2nd option in the 3rd checkbox
so i tried the below code it results as NoSuchElementError :
bot.FindElementByXPath("//*[#value='false'][2]").Click
Here is the complete HTML code of form:
<form>
<div class="bs-FilterControl-flyout">
<div class="bs-FilterControl-flyout-inner">
<div class="bs-FilterControl-flyout-gradient"></div>
<div class="bs-FilterControl-flyout-contents">
<div class="bs-FilterControl-flyout-header"><button class="Button bs-ButtonLegacy Flex-flex" type="button" href=""><div class="Button-fill bs-ButtonLegacy-fill Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--baseline Flex-direction--row" style="position: relative;"><div class="TextAligner" style="line-height: 16px; font-size: 13px; flex: 0 0 auto;"></div><div class="Box-root Flex-flex Flex-alignItems--baseline Flex-direction--row Flex-justifyContent--flexStart" style="flex: 1 1 auto; line-height: 0;"><span class="Button-label Text-color--default Text-fontSize--13 Text-fontWeight--medium Text-lineHeight--16 Text-typeface--base Text-wrap--noWrap Text-display--block" style="margin-top: -1px; transform: translateY(0.5px);"><span>Clear</span></span></div></div></button>
<h2><span>Filters</span></h2><button class="Button bs-ButtonLegacy Button--color Button--color--blue Flex-flex" type="submit" href=""><div class="Button-fill bs-ButtonLegacy-fill Box-root Box-background--blue Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--baseline Flex-direction--row" style="position: relative;"><div class="TextAligner" style="line-height: 16px; font-size: 13px; flex: 0 0 auto;"></div><div class="Box-root Flex-flex Flex-alignItems--baseline Flex-direction--row Flex-justifyContent--flexStart" style="flex: 1 1 auto; line-height: 0;"><span class="Button-label Text-color--white Text-fontSize--13 Text-fontWeight--medium Text-lineHeight--16 Text-typeface--base Text-wrap--noWrap Text-display--block" style="margin-top: -1px; transform: translateY(0.5px);"><span>Done</span></span></div></div></button></div>
<div
class="bs-FilterControl-list">
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="created"><span>Date</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="inTheLast">is in the last</option>
<option value="equals">is equal to</option>
<option value="between">is between</option>
<option value="isOnOrAfter">is on or after</option>
<option value="isBefore">is before</option>
<option value="isBeforeOrOn">is before or on</option>
</select>
<div class="bs-FilterControl-input-container">
<div class="bs-FilterControl-inTheLast-container"><span><input class="bs-FilterControl-textInput" type="text" value=""></span>
<select class="bs-FilterControl-unitSelect">
<option value="days">days</option>
<option value="months">months</option>
</select>
</div>
</div>
<div class="bs-FilterControl-timezone">
<div class="Box-root">
<div class="Box-root Flex-flex Flex-alignItems--center Flex-direction--row Flex-justifyContent--flexStart" style="margin-left: -8px;">
<div class="Box-root Box-hideIfEmpty Margin-left--8">
<div class="bs-FilterControl-timezoneLabel"><span>Timezone:</span></div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--8"><label class="Radio bs-FilterControl-timezoneRadio" for="radio46"><input title="CST/CDT - Chicago" class="Radio-source" id="radio46" type="radio"><div class="Radio-box Box-root Flex-flex Flex-alignItems--center" style="height: 20px;"><div class="Radio-target Box-root Box-background--blue"><div class="Radio-dot Box-root Box-background--white"></div></div></div><div class="Radio-copy Box-root Margin-left--8"><span class="Text-color--default Text-fontSize--14 Text-fontWeight--medium Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--block">CST/CDT</span></div></label></div>
<div
class="Box-root Box-hideIfEmpty Margin-left--8"><label class="Radio bs-FilterControl-timezoneRadio" for="radio47"><input title="UTC - UTC" class="Radio-source" id="radio47" type="radio"><div class="Radio-box Box-root Flex-flex Flex-alignItems--center" style="height: 20px;"><div class="Radio-target Box-root Box-background--white"><div class="Radio-dot Box-root"></div></div></div><div class="Radio-copy Box-root Margin-left--8"><span class="Text-color--default Text-fontSize--14 Text-fontWeight--medium Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--block">UTC</span></div></label></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="amount"><span>Amount</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="equals">is equal to</option>
<option value="between">is between</option>
<option value="greaterThan">is greater than</option>
<option value="lessThan">is less than</option>
</select>
<div class="bs-FilterControl-input-container"><span> </span><span><input class="bs-FilterControl-textInput" type="text" value=""></span></div>
</div>
</div>
</div>
<div class="bs-FilterControl-item--expanded"><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="paid"><span>Status</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is successful</option>
<option value="false">is failed</option>
<option value="pending">is pending</option>
</select>
</div>
</div>
</div>
<div class="bs-FilterControl-item--expanded"><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="refunded"><span>Refunded</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is fully refunded</option>
<option value="false">is not refunded</option>
<option value="partial">is partially refunded</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="captured"><span>Captured</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">has been captured</option>
<option value="false">has not been captured</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="disputed"><span>Disputed</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is disputed</option>
<option value="false">is not disputed</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="source"><span>Payment source</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="card">Card</option>
<option value="bank_account">Bank Account</option>
<option value="ach_credit_transfer">ACH Credit Transfer</option>
<option value="ach_debit">ACH Debit</option>
<option value="alipay">Alipay</option>
<option value="bancontact">Bancontact</option>
<option value="eps">EPS</option>
<option value="giropay">Giropay</option>
<option value="ideal">iDEAL</option>
<option value="multibanco">Multibanco</option>
<option value="p24">P24</option>
<option value="sofort">SOFORT</option>
<option value="three_d_secure">3D Secure</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Try
bot.FindElementByXPath("//*[text()='is not refunded']").Click
It matches the element on the desired text of the drop down option.
I created a product that requires custom fields. I went through the tutorial and I have them working on the product page.
Working Fields on Product Page
Not working fields on Featured Product
So there are two sessions. Product-customizable-template (this is what this code is on). When i create a product I have to select this template to be used.
The one used for the home page is a feature. feature-product.liquid. It clearly doesn't import any setting created on the product template.
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
{% comment %}
Custom Information
{% endcomment %}
<div>
<div class="row">
<div class="four columns alpha">
<label for="groom_name">Groom's First Name</label>
<input required type="text" id="groom_name" name="properties[groom_name]" placeholder="Groom">
</div>
<div>
<label for="four_name">Bride's First Name</label>
<input required type="text" id="bride_name" name="properties[bride_name]" placeholder="Bride">
</div>
</div>
<label for="last_name">Last Name</label>
<input required type="text" id="last_name" name="properties[Last Name]" placeholder="Last Name">
<label for="wedding_date">Wedding Date</label>
<input required type="date" name="wedding_date">
<label for="city">City</label>
<input required type="text" id="city" name="properties[City]" placeholder="City">
<label for="state">State</label>
<input required list="state" name="state">
<datalist id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</datalist>
</div>
What am I missing?
What you want to do is make the fields required inputs (see the steps in "Make customization form fields required") in that tutorial. Then the customers will have to go to the Product page to add the item to their cart.
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>