I have grid with kendo when i changed selected row background-color but when i selected row it has also shows me border-bottom as in image
I want to delete that blue line.Also i tried the css like this but not worked.
.k-grid .k-state-selected tr {
border-bottom: none;
}
How to solve this?
From looking at the Kendo Grid's page on grid selection, it looks like it is the row (tr) which has the class k-state-selected.
The above CSS selector that you've attempted to use says that the element you're trying to style is a tr tag that is an ancestor of the element with the class k-state-selected.
This is not true as the row itself is what has that class. You can fix it like so:
.k-grid tr.k-state-selected {
border-bottom: none;
}
Related
I am using this css code to change every odd/even tr bg color
tbody tr:nth-child(odd){background-color: #b2b2b2;}
tbody tr:nth-child(even){background-color:black;}
But i am filtering table data and based on conditions some TR will be hidden.
so if style="display: none;" then apply odd/even rules only for visible TR only.
Otherwise it look like attached image
Just add to tr class "disabled" {display: none;}
And add to your css:
tbody tr:nth-child(even):not(.disabled){background-color:black;}
Here's one that I've seen before but I can't seem to get it. Basically there are two sorting filters on a table - on one of them, some of the rows that don't apply are hidden and therefore throwing off the alternating colors. Below is the code for the function that sorts, and the CSS. The page loads with the following issue as well. Any ideas? Thanks
//Function that sorts the table (JS and Knockout)
orderHistoryFilterSelector = new ax.Selector($orderHistoryFilterSelector, {
onSelect: function($link) {
if (orderHistoryDTO) {
filterOrderHistoryTable(orderHistoryDTO, $link);
}
}
});
//CSS (background on tr:nth-child(even) set to white as default)
table tbody tr:nth-child(odd) {
background-color: #f9f9f9;
//HTML - see screenshot
This one is the one that isn't working
This one is how it's supposed to function
You can make it to where instead of using the attribute "style" inline, have a class:
.hidden {
display: none;
}
Add that class to the ones that are hidden then change your css rule to :
table tbody tr:nth-child(odd):not('.hidden') {
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
i have a table with data and when i mouse over on one of the column in the table, it has to show the tooltip at top right position, issue is for the first row in the table the tooltip data is getting hidden as table header has to show up. How to resolve it.
Thanks in advance.
Add a class name to the first and second rows and for those rows only adjust the popup to desired position:
.firstRow a.tooltip:hover span,
.secondRow a.tooltip:hover span {
bottom:auto;
top:10px
}
fiddle
if you cannot add class names to your rows, then use css nth-child:
.GridviewScrollItem:nth-child(3) a.tooltip:hover span,
.GridviewScrollItem:nth-child(2) a.tooltip:hover span {
bottom:auto;
top:10px
}
fiddle
I want to add css class to td which is created dynamically and this is portion of my code
var newTD = document.createElement("td");
td is created but border is not coming.
td is added into table properly when user clicks on plus button.css is not applied.
css class is
table.ms_grid td, table.ms_grid table td
{
padding: 3px 5px;
border: 1px #D3E4F5 solid;
cursor: pointer;
}
this code is part of my project
please suggest solution.
Most table cell borders won't display unless there's something within.
The old method was to add a inside however I believe there's a CSS property to always show borders. Will edit if I find it.
There it is, empty-cells, supported in everything (current) except IE7 and below