I have an AG Grid table with checkboxes at the left of each row to select that row, as well as a checkbox in the header to select All rows. I want the selected checkboxes on the individual rows to have a dark purple background with a white check mark, and the Select All checkbox in the header to have a white background with a black check mark. Using the following CSS, I'm able to correctly set the colors for the individual row checkboxes, and I can set the background of the header checkbox to white, but I can't figure out how to independently change the color of the check mark in the header from white to black.
.ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {
color: $bg-dark-blue !important;
}
.ag-header-cell .ag-checkbox-input-wrapper.ag-checked::after {
color: $white !important;
}
Related
In My TableView with CellSelection enabled i would like to Color the Selected Cell in Light-Blue and the Row of the Selected Cell in Dark-Blue.
I can put this into the RowListener. This Works but drains Performance because i need to Reload the Rows when the selection of cells changes.
In Css i can do:
.table-row:selected {
-fx-background-color: #005797;
}
.table-row-cell:selected {
-fx-background-color: #009097;
}
But this only works for the Row with RowSelection and for the Cell with CellSelection.
Is there a way to do both in css for CellSelection?
In my application im using tablewidget thats works fine but not able to change border color and background color and text color of the table. I want the "white" border color ,"black" background color and "white" text color for entire table (include cells). I tried the code like,
//
tableWidget->item(0,0)->setBackgroundColor(Qt::black);
tableWidget->item(0,0)->setTextColor(Qt::white);
//the above 2 lines works fine , but how to set cell border color as white
QString styleSheet = "::section{" // "QHeaderView::section {""spacing: 10px;""background-color: green;""color:white;""border: 1px solid white;""margin: 1px;""text-align: right;""font-family: arial;" "font-size: 12px; }";
tableWidget->horizontalHeader()->setStyleSheet(styleSheet);
I tried the stylesheet also but that also not working.Guide me,
I have a JavaFX TableView and a ListView and they both use custom cell factories. In particular I have overridden updateItem method in order to bind a particular CSS class based on cell value.
This is part of my CSS file:
.tissueCell {
-fx-text-fill: #F5AD11;
}
.tissueCell:selected {
-fx-background-color: #F5AD11;
-fx-text-fill: white;
}
.significantDataCell {
-fx-background-color: yellow;
-fx-text-fill: black;
}
.significantDataCell:selected {
-fx-background-color: white;
-fx-text-fill: black;
}
For the ListView everything work flawlessly: text is displayed with the proper colour and when the cell is selected the text becomes white and the background is filled with proper colour.
I am experiencing problems with the TableView instead. When unselected the text in the cell is displayed with the chosen colour, but when the cell is selected the background is filled with default JavaFX colour for selected table cells background and the text colour remains #F5AD11 (it does not become white).
The same happens with TableCells that use .significantDataCell class. Cells are displayed properly with yellow background and black text, but when selected nothing changes, not event the background this time.
Any ideas? I did a lot of research but couldn't find any working solution.
By default, TableViews do not allow selection of individual cells, but allow selection of rows. Thus the selector .table-cell:selected never matches any cell in the default selection mode. In this case, you would need
.table-row-cell:selected .table-cell {
/* style definitions */
}
or in your scenario
.table-row-cell:selected .tissue-cell {
-fx-background-color: #F5AD11;
-fx-text-fill: white;
}
etc.
If you allow the table to use cell selection, by calling
myTableView.setCellSelectionEnabled(true);
then individual cells become selected on mouse click (etc), and so your original CSS will work.
I'm trying to modify my radio button using the following criterion:
"No" radiobutton turn red and display 'N' as content when clicked or hovered over
"Yes" radiobutton turn green and display "Y" as content when clicked or hovered over
This is what I have so far: http://jsbin.com/putoz/2/edit
The problem is that I can't find the correct CSS selectors for ".yes-label" and ".no-label" lasses.
What about using the id attribute to distinguish between buttons?
Something like this to change background color on click:
input[id="appointment-yes"]:checked + label:before { ;}
input[id="appoinment-no"]:checked + label:before { ;} (appointment-no is missing a 't'?)
And then change background color during hover with these?
.yes-label:hover:before { ; }
.no-label:hover:before { ; }
The default is for the selected row to be colored gray if the QTableWidget does not have focus, and orange if it does have focus. I would like to, instead, make the selected row be red whether or not the widget has focus. I tried adding this to the style sheet:
QTableWidget{ selection-background-color: red}
I also tried
QTableWidget:edit-focus{ selection-background-color: red}
and
QTableWidget:focus{ selection-background-color: red}
but none of them seem to turn anything red, it still seems to remain orange if focused and gray if not. What properties do I have to set to make the selected row always the same color, whether or not it has focus?
Thanks,
David
You almost had it. Technically speaking, you're adjusting the selection color of the items within your table widget, so:
QTableWidget::item{ selection-background-color: red}
should do the trick.
Alternatively:
QTableWidget::item{ background-color: blue }
QTableWidget::item:selected{ background-color: red }
background-color will set background color of the items in row and selection-color will set the text color because when the row is selected then if text are present in the row then it might become unreadable due to color so setting proper text color is important.
#d9fffb : light blue
#000000 : black
self.table.setStyleSheet(
"QTableView::item:selected"
"{"
"background-color : #d9fffb;"
"selection-color : #000000;"
"}"
)