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.
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>
I am using materialize css. I created a tab and put select element inside it. But it was not closing after selecting element.I am using materialize 0.98.
If i put it outside tab then it works.
Here is my code :
My Scrtipt
<script>
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select();
});
</script>
Html Code :
<div class="main mainContentMargin">
<div class="row">
<!-- This will Work-->
<div class="col s12 input-field">
<select id="company_select1" name="company_select1">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
<div class="row">
<div class="card col s12 medium">
<ul id="tabs-swipe-demo" class="tabs tabs-fixed-width" style="margin-bottom: 1%">
<li class="tab col s6">To Supplier</li>
<li class="tab col s6">Using Product</li>
</ul>
<div id="test-swipe-1" class="col s12">
<!-- This will Work but not closing the dropdown-->
<div class="row">
<div class="col s12 input-field">
<select id="company_select" name="company_select">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
</div>
<div id="test-swipe-2" class="col s12">
</div>
</div>
</div>
</div>
Dropdown is not closing because we make tab swipeable. That's why it dropdown click event was catched by the tab.
I just set the stopPropogation option to true in dropdown and it work
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select({"stopPropagation":true});
});
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>
Iam new to selenium and i want to enter value in dropdown list and tried with various methods and searched in web and i have seen
many posts in the STACKOVER flow nothing worked for me
this is the HTML code
i tried with
1) x=Select(driver.find_element_by_id("expiry-date-month"))
x.select_by_value("4")
2) element = driver.find_element_by_id('expiry-date-month')
for option in element.find_elements_by_tag_name('option'):
if option.text=='4':
option.click()
i want to Select the Month check box values when iam trying getting error message as "Element is not currently visible and so may not be interacted with" please show me a solution for this
HTML code
<form id="form-credit-card" method="get" enctype="application/x-www-form-urlencoded" novalidate="novalidate">
<div class="row-fluid"/>
<div class="row-fluid">
<div class="row-fluid card-wrap">
<div class="row-fluid name-wrap">
<div class="row-fluid dob-wrap hide" style="opacity: 0;">
<div class="row-fluid maestro-wrap hide" style="opacity: 0;">
<div class="row-fluid">
<div class="span3 iframe expiry-wrap">
<label for="expiry-date">Expiration date</label>
<select id="expiry-date-month" class="expirydatemonth selectBox" size="1" name="expirydatemonth" style="display: none;">
<option value="">Month</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<a class="selectBox expirydatemonth selectBox-dropdown selectBox-active" style="width: 30px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
<span class="selectBox-label" style="width: 0px;">Month</span>
<span class="selectBox-arrow"/>
</a>
<span class="slash">/</span>
<select id="expiry-date-year" class="expirydateyear selectBox" size="1" name="expirydateyear" style="display: none;">
<a class="selectBox expirydateyear selectBox-dropdown" style="width: 30px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
</div>
As a workaround you need to enable display for that dropdown using JavaScript, as display is set to 'none'.
Below code should work for you:
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("document.getElementById('expiry-date-month').style.display='block';");
//Then Select required value
x=Select(driver.find_element_by_id("expiry-date-month"))
x.select_by_value("4")
I'm having this problem with Magento onepage checkout:
I have a local environment with wamp and a test server.
Local environment is a clean installation + the template.
Test server is an installation + all templates that have been used before (I picked up from a previous developer)
Here the issue:
After implementing the new template on test, onepage checkout isn't showing any payment methods in frontend.
I have compared both installations files and I can't find the difference, but when I see the page source on the checkout page this is what I see:
Test Server (Payments aren't shown):
<form action="" id="co-payment-form">
<fieldset id="checkout-payment-method-load">
</fieldset>
</form>
When I see pagesource of my local, there's a lot more going on...
<form action="" id="co-payment-form">
<fieldset id="checkout-payment-method-load">
<dl class="sp-methods" id="checkout-payment-method-load">
<dt>
<input id="p_method_paypal_express" value="paypal_express" type="radio" name="payment[method]" title="PayPal Express Checkout" onclick="payment.switchMethod('paypal_express')" class="radio" />
<label for="p_method_paypal_express"> <!-- PayPal Logo -->
<img src="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&buttontype=ecmark&locale=en_US" alt="Acceptance Mark" class="v-middle" />
What is PayPal?
<!-- PayPal Logo -->
</label>
</dt>
<dd>
<ul class="form-list" id="payment_form_paypal_express" style="display:none;">
<li class="form-alt">You will be redirected to the PayPal website.</li>
</ul>
</dd>
<dt>
<input id="p_method_authorizenet" value="authorizenet" type="radio" name="payment[method]" title="Credit Card (Authorize.net)" onclick="payment.switchMethod('authorizenet')" class="radio" />
<label for="p_method_authorizenet">Credit Card (Authorize.net) </label>
</dt>
<dd>
<ul class="form-list" id="payment_form_authorizenet" style="display:none;">
<li>
<label for="authorizenet_cc_type" class="required"><em>*</em>Credit Card Type</label>
<div class="input-box">
<select id="authorizenet_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">
<option value="">--Please Select--</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</div>
</li>
<li>
<label for="authorizenet_cc_number" class="required"><em>*</em>Credit Card Number</label>
<div class="input-box">
<input type="text" id="authorizenet_cc_number" name="payment[cc_number]" title="Credit Card Number" class="input-text validate-cc-number validate-cc-type" value="" />
</div>
</li>
<li id="authorizenet_cc_type_exp_div">
<label for="authorizenet_expiration" class="required"><em>*</em>Expiration Date</label>
<div class="input-box">
<div class="v-fix">
<select id="authorizenet_expiration" name="payment[cc_exp_month]" class="month validate-cc-exp required-entry">
<option value="" selected="selected">Month</option>
<option value="1">01 - January</option>
<option value="2">02 - February</option>
<option value="3">03 - March</option>
<option value="4">04 - April</option>
<option value="5">05 - May</option>
<option value="6">06 - June</option>
<option value="7">07 - July</option>
<option value="8">08 - August</option>
<option value="9">09 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
</div>
<div class="v-fix">
<select id="authorizenet_expiration_yr" name="payment[cc_exp_year]" class="year required-entry">
<option value="" selected="selected">Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</div>
</div>
</li>
</ul>
</dd>
</dl>
<script type="text/javascript">
//<![CDATA[
payment.init();
//]]>
</script>
</fieldset>
</form>
Can someone PLEASE help me correct this? I have been stuck in this for the past few days and can't seem to at least get close to a solution :(
Thank you in advance for your time and sorry if the code looks messy.
I fixed it finally. It was a module that was hidden somewhere that was actually calling the payment methods. Since I change template the call was just empty and nothing was being showed since the extension was elsewhere in the installation.
Thank you guys for your help you did point me in the right direction to find this. Much appreciated.