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
Related
I want to hide the header row from appearing, being visible on the table. (Both when viewed from desktop and mobile)
I tried:
"drawCallback":function(settings ){$("#mySelection thead").remove();} ,
While this code seems to render the table the way I want (header-less), it also effects the output of the buttons used here. The buttons are set to output whatever is visible (toggled by column visibility).
And unfortunately this code removes not just the theader in the export output, but also all the data that was in the tables.
The same thing happens when I try:
$("#mySelection thead").hide()
Is there anyway to keep the output as it was before and only hide the table headers from view, as in just the row with the column titles? I want to keep the buttons (copy, excel, pdf, colvis) working on the table data.
https://jsfiddle.net/287fum2q/
EDIT:
Using the following code in the CSS results in the problem I mentioned in the first part of my question:
.ui.table thead { display: none !important; }
As does this:
thead { display: none!important; }
If you could include a saved jsfiddle that shows the solution, that'd be all the more helpful.
It appears the DataTables Jquery plugin may possibly have a bug. DataTables assumes the header display will not be set to none. When you set the header display:none it prevents the DataTables buttons from working as expected.
Here's your workaround:
.ui.table thead {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
This removes the header from sight, but the DataTables buttons still have what they need to work correctly. I just learned this can be good practice (surprisingly) because display:none makes content "inaccessible" to screen readers.
thead css was conflict with semanticui.min.css so used !important to overwrite css
.ui.table thead {
display: none !important;
}
I'm using Eonasdan/bootstrap-datetimepicker inside a <table/> and it works perfectly in some rows, however in the last rows the datetimepicker popup doesn't show in the right place where it should be.
Here's an image that illustrates the problem
And here's JSFiddle where you can try it out.
Apply position:relative to the <td> of your table. will solve your issue.
Here's updated fiddle https://jsfiddle.net/znLmpgz7/1/
.table td{
position:relative;
}
I have solved the issue by adding position:relative; rule to .bootstrap-datetimepicker-widget class in bootstrap-datetimepicker.min.js. and i also have some top position issue so i just set "top:0px !important" in css.
So I am trying to have a dropdown in a fixed header. floatThead works well for fixing to the top, but the dropdown can only display the elements that fit in the header of the table because of the wrapping overflow:hidden as part of floatThead. Here is a jsfiddle. I tried upping/downing the z-index to no avail. Is it possible or should I get rid of the dropdown? (It isn't all together necessary, but a nice bonus if it could work).
$(document).ready(function() {
$('.sticky-header').floatThead({zIndex: 1001});
});
You could set .floatThead-container to have overflow: visible and use !important to override the inline styling.
div.floatThead-container {
overflow: visible !important;
}
JSFiddle
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 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/