I need to add the styling to dropdown values on mouseover. To achieve it I need to add class to dropdown.
Is there any other way to fix the issue?
fiddle here jsfiddle.net/37GHw/165
You could override the existing css class of the dropdown items and provide your own styling.
.wj-listbox-item:hover {
background-color: blue !important;
}
Please check the updated fiddle : http://jsfiddle.net/37GHw/177/
Related
For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
I want to add a row hover to the Webix datatable using hover property, but it doesn't affect to the selected row by default.
I've tried to modify the :hover of the selection class, but the current notation works only for the hovered cell (while I need a hovered row):
<style>
.bluehover{
background:lightblue;
}
.webix_row_select:hover{
background:lightblue !important;
}
</style>
Snippet here.
Will appreciate any help.
Just change
.webix_row_select:hover{
background:lightblue !important;
}
to
.webix_row_select *:hover{
background:lightblue;
}
Updated snippet
I think the solution from #aisah is not up to date anymore.
Under webix 8 one only needs to set hover:<css_class> and define
.<css_class>{background: <my_color>;} without the hover selector.
Snippet
Webix Documentation
When I try and use the dropdown with search selection and select a subcategory, it expands into itself and a small scrollbar appears in the dropdown. If I don't add search selection it seems to function just fine.
JSFiddle: https://jsfiddle.net/utqz406p/4/
How do I correct this issue?
Edit: This also seems to happen with the selection class as well.
You need to override the default selection dropdown style.
Please use this style
.ui.selection.dropdown .menu {
overflow: visible !important;
}
I've been struggling with this for a while (I'm really not experienced with jQuery UI).
I'm trying to implement a jQuery UI that has a selectmenu next to some regular buttons. For some reason I can't understand, the selectmenu is mis-aligned; it's way higher up on the page than the buttons.
Here's what it looks like:
I'm not sure if this is a bug or not, it sure looks very wrong to me. I've been struggling for quite a while now but haven't been able to figure it out.
The markup is really very basic so I don't think it's very helpful to include it here., but it's all here: http://jsbin.com/afixij/10/edit?html,css,js,output. Widen the Output to see all three elements (the selectmenu, and the buttons Foo and Bar) on the same line.
You could just apply vertical-align:middle to the dropdown which is made up of spans to get the buttons aligned properly with the dropdown.
#speed-button{
vertical-align : middle;
}
Bin
It appears there is no option to provide a custom classname for select menu widget (It is bad if that is the case) as applying rule to a class would be much better. You could as well do:-
Apply a classname for the select
and in css provide a generic rule for any .menu-buttons
.menu-button + .ui-selectmenu-button{
vertical-align : middle;
}
Bin2
It might actually be easier to make the actual buttons (not menu) up by using
<button style="vertical-align: top"></button>
It can be inlined and creation of a custom class isn't required.
The solution I applied was to place the content I wished to be vertically aligned in a display: flex entry. For example:
<div style="display: flex; align-items: center;">
... other elements here
</div>
for more details on this display type, see this excellent discussion:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
To expand on the marked answer, there is a way to obtain the jquery object the selectmenu creates. Make sure you initialize the selectmenu first or it won't work.
$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");
CSS:
.fixAnnoyingSelectAlignmentClass
{
vertical-align: middle;
}
I am trying to find a script that would let me do what YP.com does. If you look at the business search input it says Business Name or Category. Then if you click on it, the text fades a little, and when you type words, it fades completely. How would I do this? Any help would be greatly appreciated.
You can have a look at this jQuery example :
http://www.benwatts.ca/2008/07/19/jquery-input-text-replacement/
Declare 2 CSS classes :
.black{
color:black;
}
.grey{
color:grey;
}
The default CSS class for your input can be the black class.
Like in the link above :
Use the focus event for changing the CSS to the grey class
Use the blur event for changing the CSS to the black class
Add the onKeyDown event to delete the original value and change the CSS to the black class.
You could use onfocus to do the first fade. Then onkeydown and fade completely.