I am using Zurb Css framework, As documented on foundation.zurb.com/docs/forms.php I used the same code as provided as below
<label for="customDropdown">Dropdown Label</label>
<select style="display:none;" id="customDropdown">
<option SELECTED>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
<div class="custom dropdown">
This is a dropdown
<ul>
<li>This is a dropdown</li>
<li>This is another option</li>
<li>Look, a third option</li>
</ul>
</div>
But I Cannot see any drop down , The code above is copy pasted from their website.
Thank You.
It was silly mistake I forgot to put class='custom' for the form element.
Related
so i have a web page displaying a Kendo MultiSelectFor tag. all works fine.
The user's data is unfortunately very long so the drop-down selection items get wrapped. the users do not like this.
Is there a way to override the size of the drop down list so that is wider than the selected items listbox (which sits above)?
The html snippet below is what I have - (but won't run pretty)
So far I have been trying to override some styles using something like this:
#accommodationsMultiselect .k-valid {
left:-100px; width: 600px
}
i have not been able to affect any change so far. thanks in advance
JB
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<div class="form-group">
<label for="AccommodationIDs">Accommodations</label>
<div>
<div class="k-widget k-multiselect k-header" deselectable="on" title="" style="">
<div class="k-multiselect-wrap k-floatwrap" deselectable="on">
<ul role="listbox" deselectable="on" class="k-reset" id="accommodationsMultiselect_taglist">
<li class="k-button" deselectable="on">
<div>
<span deselectable="on">
<span class="k-state-default">Calculator - provided by family</span>
</span>
</div>
</li>
<li class="k-button" deselectable="on">
<div>
<span deselectable="on">
<span class="k-state-default">Computer for Essay</span>
</span>
</div>
</li>
<li class="k-button" deselectable="on">
<div>
<span deselectable="on">
<span class="k-state-default">Extended Time - Time and a half (1.5x)</span>
</span>
</div>
</li>
</ul>
<input class="k-input k-valid" style="width: 25px;" accesskey="" autocomplete="off" role="listbox" title=""
aria-expanded="false" tabindex="0" aria-owns="accommodationsMultiselect_taglist accommodationsMultiselect_listbox"
aria-disabled="false" aria-busy="false" aria-activedescendant="bd81cf39-1dbe-431d-985c-57c3d3a11027" />
</div>
<select id="accommodationsMultiselect" multiple="multiple" name="accommodationsMultiselect" data-role="multiselect"
style="display: none;" aria-disabled="false" class="k-valid">
<option value="b08e686b-01bb-4cce-8aaa-fe836741c98e" selected="selected">Extended Time - Time and a half
(1.5x)</option>
<option value="b9812a54-fc87-494b-8bc3-453318143ee5">Double Time (2x)</option>
<option value="aa562f06-0c72-4bf8-9cd9-3e0b0c9d56df">Mark Answers in Test Booklet</option>
<option value="79795988-8722-4970-9c20-55cc90c3d732">Large Print Test and Circle Answers in Test Booklet</option>
<option value="dc4018db-a800-40d6-adbd-1afaefd72ddb" selected="selected">Calculator - provided by family</option>
<option value="03696d5b-65a9-4f1a-b548-1559ac5bceaf" selected="selected">Computer for Essay</option>
<option value="d08d568a-4861-4fae-a2e0-cde6f7f9ecec">Computer with Spell Check for Essay</option>
<option value="81a57096-847c-48c2-a217-eac0ca43eca7">Computer for Essay - provided by family</option>
<option value="e7eee91c-25a1-471c-9c0e-e1d454061834">Computer with Spell Check for Essay - provided by family</option>
<option value="f90a8609-6d65-4164-9652-883fbfce4c52">Computer for Essay - computer and printer provided by
family</option>
<option value="d25c1216-86e4-4c6b-b4a4-716ccc2ec41f">Computer with Spell Check for Essay - computer and printer
provided by family</option>
<option value="b4245a2b-a556-4481-b782-f704ca60bc14">Reader (may have limited availability at select ISEE test
locations)</option>
<option value="13fc2384-fa03-4a8a-b883-ffd484961c1e">Scribe (may have limited availability at select ISEE test
locations)</option>
<option value="23c68259-6137-4ddf-8208-8d433df65fa2">Scribe for Essay only (may have limited availability at select
ISEE test locations)</option>
<option value="1c7347d6-2d59-4670-aecc-cbca9b493d3b">Other (may have limited availability for "Other"
accommodations requested)</option>
</select>
</div>
</div>
</div>
</body>
</html>
Get a reference to the multiselect and simply set the .width() of it's .list.
var multiSelect = $("#multiselect").kendoMultiSelect({
animation: false
}).getKendoMultiSelect();
multiSelect.list.width(500);
// Or even:
// multiSelect.list.width("auto");
Check you http://dojo.telerik.com/#Stephen/uLAbU for a working example.
This technique works for DropDownLists and ComboBoxes as well, possibly other "dropdown" type controls.
I am creating a registration form where i am have to create three select box. First selectbox contains all the countries, based on selection the state select box become visible and only state available in particular selected country will be display. there is also city selectbox too, where by default city dropdown will not display until state been selected and based on selection only cities belongs to particular state selected in state selectbox will be displayed.
I am able to generate all select box, but how to filter based on selection, i really don't know.
Effort:
<div class="form-group">
<label th:text="#{register.label.country}" `class="col-md-4 control-label">Country:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.country}">
<option value="-1">--- Select Country ---</option>
<option th:each="country : *{countries}" th:value="${country.configId}" th:text="${country.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.country')}" th:errors="*{address.country}">Country Error</strong>
</div>
</div>
<div class="form-group">
<label th:text="#{register.label.state}" class="col-md-4 control-label">State:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.state}">
<option value="-1">--- Select State ---</option>
<option th:each="state : *{states.?[parentid = 1]}" th:value="${state.configId}" th:text="${state.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.state')}" th:errors="*{address.state}">Country Error</strong>
</div>
</div>
<div class="form-group">
<label th:text="#{register.label.city}" class="col-md-4 control-label">City:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.city}">
<option value="-1">--- Select City ---</option>
<option th:each="city : *{cities}" th:value="${city.configId}" th:text="${city.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.city')}" th:errors="*{address.city}">Country Error</strong>
</div>
</div>
I am able to generate all the selectbox, but i really don't know how to generate based on selection in thymeleaf with Spring boot.
Please help me. I know i can do this by using jquery ajax, but i want to avoid, i am thing is it possible with thymeleaf itself or not.
Thymeleaf is a server-side web template engine.
Once it is rendered, and is displayed to client, Thymeleaf is no longer there.
The only way to handle it is through javascript; or by sending a new request to render new filtered options.
I'm trying to load the specific value of a drop down select tag when I'm loading that html inside the Marionette LayoutView.
The situation is
This is my html template which is passed to a Marionette LayoutView with a Model
<div class="span3">
<div class="control-group">
<label for="registeredIndicator">Registered</label>
<select class="input-medium" id="registeredIndicator">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
In that model a value registered indicator is retrieved as true or false.
My Goal is - When this template is rendered I want to display the value which is retrieved i.e. if its true, registeredIndicator should be Yes and vice-versa.
I accomplished this thing with help of jQuery inside the onRender function of LayoutView like
if(true === this.model.get('registeredIndicator')){
this.$('#registeredIndicator option:eq(1)').prop('selected', true);
}
but I got lot of drop downs in the HTML and it would not be a efficient way to check each every one with jquery.
I tried using if else inside the HTML with <%%> but this was not fruitful and is not correct also.
Is there any another approach available in which i can manipulate the data inside the template itself?
Thanks in advance!
Adding the conditional below should work:
<div class="span3">
<div class="control-group">
<label for="registeredIndicator">Registered</label>
<select class="input-medium" id="registeredIndicator">
<option value="">Select</option>
<option <%= registeredIndicator ? "selected" : "" %> value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
Specifically I added <%= registeredIndicator ? "selected" : "" %> to your template.
I have been using the Ruby page object gem successfully for the last few months, however the new software I'm testing is using Bootstrap so it has become harder.
e.g I'm trying to select from a dropdown, which is normally simple, but with Bootstrap the original HTML isn't visible to the driver:
<select class="currency-selector" style="display: none;">
<option value="GLOBAL">All</option>
<option selected="" value="GBP">GBP</option>
</select>
So this isn't working.
select_list(:original_currency, :class => 'currency-selector')
What is visible to the driver is all the Bootstrap generated code which looks more like this:
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 164.5px; overflow-y: auto; min-height: 80px;">
<li rel="0">
<li class="selected" rel="1">
<a class="" style="" tabindex="0">
<span class="text">GBP</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"></i>
</a>
</li>
<li rel="2">
<li rel="3">
</ul>
Is there a nice way around this problem and still using the page object gem or will I be forced to use selenium more directly?
Can you use ID's instead of class selectors? I looked over at the page object gem (as I use capybara as my alternative) and it seems straightforward.
select_list(:original_currency, :id => "currency-list")
Next you'd just add that ID to your HTML
<select class="currency-selector" style="display: none;" id="currency-list">
<option value="GLOBAL">All</option>
<option selected="" value="GBP">GBP</option>
</select>
You're right that bootstrap generates a lot so I think ID's will make your tests less brittle.
I am a beginner in using webdriver and Here is the code with which i am working.
I want to click on a dropdown and again click on the list of values provided for that dropdown.
Please help me, i looked for other threads, but they are different.
<ul>
<li class="size select required">
<div id="dk_container_partNumber-55414" class="dk_container dk_theme_size dk_focus"
tabindex="" style="display: block;">
<a class="dk_toggle" style="width: 162px;">
<div class="dk_options">
<ul class="dk_options_inner">
<li class="dk_option_current">
<li class="">
<a data-dk-dropdown-value="605930243">S</a>
</li>
<li class="">
<a data-dk-dropdown-value="605930251">M</a>
</li>
<li class="">
<a data-dk-dropdown-value="605930260">L</a>
</li>
<li class="">
<a data-dk-dropdown-value="605930278">XL</a>
</li>
<li class="">
<a data-dk-dropdown-value="605930286">XXL</a>
</li>
</ul>
</div>
</div>
<select id="partNumber-55414" class="size-select" name="partNumber" style="display: none;">
<option data-property="CAT_SELECTSIZE" selected="selected" value="">Select Size</option>
<option value="605930243">S</option>
<option value="605930251">M</option>
<option value="605930260">L</option>
<option value="605930278">XL</option>
<option value="605930286">XXL</option>
</select>
I wish to select "S" and the same must be seen on the dropdown.
I am able to click on the dropdown and see the list of options using the below code :
driver.findElement(By.xpath("//(more xpath goes here)/ul/li[#class = 'size select required']/div/a/span")).click();
I tried the below code to select "S", but in vain :
Select SizeDropdown = new Select(driver.findElement(By.xpath("//(more xpath here)/ul/li[#class = 'size select required']/select")));
//driver.findElement(By.xpath("(//(more xpath here)/ul/li[#class = 'size select required']/select)/option[2]")).click();
//Below line gets and clicks the first option of Select Size 'S'
//SizeDropdown.getFirstSelectedOption().click();
//SizeDropdown.selectByVisibleText("S");
//SizeDropdown.selectByIndex(1);
//SizeDropdown.selectByValue("S");
I tried each command separately (after uncommenting),but could not see the "S" as the label of the dropdown as if it is selected by me.
Have you tried simplifying your xpath?
I use something like this to select an option from a drop down without first clicking to expand it:
Select select = new Select(driver.findElement(By.xpath("//select[#id='partNumber-55414']"));
select.selectByVisibleText("S");