Is it possible to get the css that targets each individual Kendo UI widget separately?
I'm trying to style a dropdown widget but I don't want to wade through lots of css just to copy out the bits that I need.
I had a look at the theme builder thinking that it would let me do this but that wasn't the case.
Are you trying to style all Kendo Dropdowns?
All Kendo Dropdowns are wrapped in a span that have the class .k-dropdown on them. This is how a typical Dropdown is structured.
<span class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="size_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="size_option_selected">
<span class="k-dropdown-wrap k-state-default">
<span unselectable="on" class="k-input">S - 6 3/4"</span>
<span unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<select id="size" data-role="dropdownlist" style="display: none;">
<option value="S - 6 3/4"" selected="selected">S - 6 3/4"</option>
<option value="M - 7 1/4"">M - 7 1/4"</option>
<option value="L - 7 1/8"">L - 7 1/8"</option>
<option value="XL - 7 5/8"">XL - 7 5/8"</option>
</select>
</span>
Related
In Lighthouse report I have an error: "ARIA items do not have accessible names" and it looks like div.ss-list is the problem (because it has role="listbox" attribute which fails aria-input-field-name audit). Unfortunately my slimselect doesn't copy custom attributes from select when initialized, for example aria-label="category".
Is there a way to copy/add custom attributes to slimselect div.ss-list element when initializing (without injection html after initializing) or do you have any other good solutions to that issue?
Here is sample code from devtools with already created slimselect:
<select name="category" aria-label="Category" class="search__select" tabindex="-1" data-ssid="ss-59594" aria-hidden="true" style="display: none;">
<option value="">All</option>
<option value="5576">Category 1</option>
<option value="10">Category 2</option>
<option value="82">Category 3</option>
<option value="199">Category 4</option>
</select>
<div class="ss-59594 ss-main search__select" style="">
<div class="ss-single-selected ss-open-below">
<span class="placeholder">All</span>
<span class="ss-deselect ss-hide">x</span>
<span class="ss-arrow"><span class="arrow-up"></span></span>
</div>
<div class="ss-content ss-open">
<div class="ss-search">
<input type="search" placeholder="Search" tabindex="0" aria-label="Search" autocapitalize="off" autocomplete="off" autocorrect="off">
</div>
<div class="ss-list" role="listbox">
<div class="ss-option ss-disabled ss-option-selected" role="option" data-id="97962314">All</div>
<div class="ss-option" role="option" data-id="79478522">Category 1</div>
<div class="ss-option" role="option" data-id="32989768">Category 2</div>
<div class="ss-option" role="option" data-id="53607703">Category 3</div>
<div class="ss-option" role="option" data-id="31214879">Category 4</div>
</div>
</div>
</div>
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'm trying to write a custom method that allows me to use our custom select2 country_search element. The elements are a bit wonky, but the snippet of HTML looks like this:
<div class="control-group select optional admins_customer_form_object_country_id">
<label class="select optional control-label" for="admins_customer_form_object_country_id">Country</label>
<div class="controls">
<select id="admins_customer_form_object_country_id" class="select optional select2-hidden-accessible" name="admins_customer_form_object[country_id]" tabindex="-1" aria-hidden="true">
<option value=""></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<span class="select2 select2-container select2-container--classic select2-container--below select2-container--focus" dir="ltr" style="width: 220px;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-admins_customer_form_object_country_id-container">
<span class="select2-selection__rendered" id="select2-admins_customer_form_object_country_id-container">
<span class="select2-selection__placeholder">Select Country</span>
</span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b>
</span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
</div>
</div>
I wrote a helper that should select the correct span and perform a click on it, but I'm stuck selecting the span I want. I'm trying to select the outer visible span which has class select2 select2-container select2-container--classic select2-container--below select2-container--focus but I keep getting invalid XPath errors.
This is what I have so far:
def select_country(label:, value:)
# Select our label first
label_element = first("label", text: label)
# Now navigate through the entire tree, and click the correct SPAN element.
within(label_element) do
select2_container = find(:xpath, "..") # Up one level to the parent div
select2_container = select2_container.find("div.controls") # Down one level into the div.container
select2_container = select2_container.find(:xpath, "./*[1]") # select the span element surrounding all.
end
end
With the last line I can select the select element from the tree, but I can't get the span sibling whatever I try.
If I'm reading correctly you want the span that is the child of div.controls, replacing the last two finds with the following should do that
select2_container = select2_container.find('div.controls > span')
You can add classes to the span in the css selector if needed but in your html it's the only span child so it's not necessary
I need help. I have been trying to automate selecting an item from a drop down menu. I have try many ways but I cannot get it to work. I using Selenium 2.39 firefox. The sample application is on https://www.salesforce.com/form/signup/freetrial-sales.jsp?d=70130000000EqoP&internal=true.
Any help will be appreciated. Thanks
The Xpath is: //*[#id='form-container']/ul/li[14]/div/div[2]/a/span[1]
Surrounded by :
<div id="form-container" class="clearfix wide-fields style-placeholder">
<div id="globalErrorMessage" style="display:none"> Please fill out the highlighted fields below </div>
<ul class="clearfix vertical form-ul">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-select">
<div class="control-container error">
<div class="label">
<div class="field">
<select id="CompanyEmployees" class="selectBox" name="CompanyEmployees" style="display: none;">
<a class="selectBox selectBox-dropdown" style="width: 296px; display: inline-block; -moz-user-select: none; "title="" tabindex="0">
<span class="selectBox-label" style="width: 262px;">Employees</span>
<span class="selectBox-arrow" />
</a>
<span class="form-field-error show-form-field-error">Select the number of employees</span>
</div>
<div class="info">
</div>
</li>
<li class=" type-hidden">
<li class=" type-hidden">
I have already tried using Select class but does not work.
Select select = new Select(driver.findElement(By.name("CompanyEmployees")));
select.selectByValue("250");
I get the following error:
....
Caused by: org.openqa.selenium.remote.ErrorHandler$UnknownServerException: Element is not currently visible and so may not be interacted with
...
There are 2 points for you to be noted:
It's not a dropdown control as such. You might have to go through some basic HTML sources on how to achieve a DropDown scenario without using the actual DropDown control.
Escaping sequence (notice inverted commas inside the XPath expression)
Below is C# code. I'm sure you can figure out the code in the language of your choice.
Driver.FindElement(By.XPath(#"(//*[#id=""form-container""])/ul/li[14]/div/div[2]/a/span[1]")).Click(); //Click on the DropDown
Driver.FindElement(By.XPath(#"/html/body/ul[1]/li[4]/a")).Click(); //selects "21 - 100 Employees"
Please try the following code for "employees" selection:
public void selectEmployees(){
WebDriver driver = new FirefoxDriver();
WebDriverWait driverWait = new WebDriverWait(driver, 30);
driver.get("https://www.salesforce.com/form/signup/freetrial-sales.jsp?d=70130000000EqoP&internal=true");
// Wait for visibility of Employees combobox and click on it to open drop-down list
// Combo-box is selected by css locator which searches for ".selectBox" element that are preceded by "#CompanyEmployees" element
WebElement emplyeesCombobox = driverWait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#CompanyEmployees ~ .selectBox")));
emplyeesCombobox.click();
//Wait for visibility of required drop-down list item ("6 - 20 employees" in this example) and select it by clicking
// Drop-down list item is selected by XPath locator which searches for "a" element with "6 - 20 employees" text
WebElement itemToSelect = driverWait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//a[text()='6 - 20 employees']")));
itemToSelect.click();
}
Hope it will help.
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.