I have included a simple kendo dropdown control in html5 page. I have used angular in my project.
The html code looks like:
<select id="locationsDropdown" kendo-drop-down-list>
<option>All Locations</option>
<option>Data 1</option>
<option>Data 2</option>
<option>Data 3</option>
</select>
The dropdown appears twice in the view. I have this problem with other kendo widgets as well. Can anyone help me solving this issue?
Here is the image of how the dropdown looks in my application: http://tinypic.com/view.php?pic=jl6suf&s=8#.U58AzSg30iQ
There are two dropdowns as shown in the image.
Thanks.
Had exactly the same issue and found that I had some leftover CSS styling on the "select" in a stylesheet included AFTER the Kendo stylesheets, the offending style was as follows.
select {
display: inline-block !important;
}
with this removed the additional control disappeared.
Hope this helps.
Related
Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
/>
This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?
In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
>
<template v-slot:message="{ message, key }">
<span v-html="message"></span>
</template>
</v-checkbox>
It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.
behaviour changed from 1.5.19 to 1.5.20
1.5.19 (and before) treats html tags as expected
1.5.20, 1.5.21 treat html tags as simple text
'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61
So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.
Kendo Grid columns' data-bind click event in the footer template is not working.
Please see the example http://dojo.telerik.com/ALAZo
The click event on column template for price is working fine but not for the footer template for the same.
Any resolution which uses MVVM binding would be greatly appreciated
By default, the header and footer of the Grid are not bound to the ViewModel. A workaround is to find the footer with an appropriate jquery selector after the grid has been initialised and then bind it manually. So something like this:
kendo.bind($("body"), viewModel);
kendo.bind($("#grid").find(".k-grid-footer"), viewModel);
Here I've added id="grid" to your grid declaration like so in order to find it:
<div id="grid" data-role="grid" data-bind="source:dataSource"
I have reworked your example in order to get a solution where click event works on both column and footer template.
<a onclick='test()'... seems to do the trick.
I am using a form in a front-end view of my website. The labels of the input fields show hints/tooltips when hovering over them with the mouse. I would like to style these tooltips with the css of my front-end template. Therefore I need to know the DOM structure of these tooltips.
Somehow, I can not find any documentation about this and using 'Inspect element' in Google Chrome also doesn't help me, because the tooltip is removed as soon as I do not hover the label anymore while trying to inspect them.
Help is very much appreciated!
Default tooltips in joomla back office have this structure, I'm pretty sure that it is the same in front office :
<div class="popover fade right in">
<div class="arrow"></div>
<h3 class="popover-title">[TITLE]</h3>
<div class="popover-content">[TEXT]</div>
</div>
I'm editing a css style sheet to use as an override on a template that I have no access to. I am wondering if it is possible to use a ::before on a <select name="aaa"> element that has no class or id to isolate it. Basically trying to put a label/icon before the select menu to make things a bit clearer.
<div class="container">
<select name="selection1">...</select>
<select name="selection2">...</select>
</div>
I've tried too many variations to mention and been hunting about with no luck. So I presume it's not possible. But you never know.
<select> doesn't allow for pseudo ::before or ::after. You can use a javascript solution or wrap each individual in a div. Not the greatest solution, but hope it helps.
I'm new to Selenium and having a difficult time selecting options from a drop down list (trying to select the second option).
Here is the HTML that I'm working with:
<div id="applicationReasonTypeIDContainer" class="appfield">
<label id="applicationReasonTypeIDLabel" for="applicationReasonTypeID">Application Reason</label>
<select name="appstart_international1:applicationReasonTypeID" id="applicationReasonTypeID" class="AppStart dropdown required" title="Application reason">
<option value="0"> </option>
<option value="1">New Application</option>
<option value="2">Additional location</option>
<option value="3">Owner change</option>
I'm using XPath checker to find the XPath, and it's giving me this but it doesn't work when I try and click or select command
id('applicationReasonTypeID_listbox')/x:li[2]
What should the proper Target be for finding an option like this using XPath?
Thanks Kindly!
If you know the text that will be in the field this is how I do it:
new Select(driver.findElement(By.id("applicationReasonTypeID"))).selectByVisibleText("New Application");
Hope that might help.
edit to add correct id and text from code provided.
What's wrong with either of the following?
new SelectElement(driver.FindElement(By.Id("CustomerDropDown"))).SelectByText("Nationwide");
new SelectElement(driver.FindElement(By.Id("CustomerDropDown"))).SelectByIndex(1);
I actually figured out the problem - it's an issue with Kendo UI not supporting drop-downs properly. Basically the workaround is the click the drop-down arrow, then use sendKeys and point to the same Target as the drop-down with the value being whatever item you want from the list, then clicking the drop-down again. This worked for me, hopefully it helps somebody else!