Qt: QListWidget separator line between items? - qt

I can't find any way to put a line between items in my list. Am I missing something?

A style sheet would be easiest, for example:
myListWidget->setStyleSheet( "QListWidget::item { border-bottom: 1px solid black; }" );
You'll want to look at some of the style sheet documentation

2 improvements to the accepted answer:
Use the color palette of the widget to achieve a uniform look across different systems.
It is necessary to restore the item:selected style when restyling item
E.g. like this:
const auto & palette = tableWidget.palette();
tableWidget.setStyleSheet(QString("QListWidget::item { border-bottom: 1px solid %1; } QListWidget::item:selected { background-color: %2; color: %3; }")
.arg(palette.midlight().color().name(),
palette.highlight().color().name(),
palette.highlightedText().color().name()));
Here you can see that the separator lines and selection color fit the default style of the widget:

Related

How to set highlight color for selected text

I have a python3 program containing this code snippet:
dmsg.set_selectable(True)
dmsg.set_name("sMsg")
style_provider = Gtk.CssProvider()
css = "#sMsg { background-color: #002348; color: white; padding: 4px 8px; }"
style_provider.load_from_data(bytes(css.encode()))
Gtk.StyleContext.add_provider_for_screen(
Gdk.Screen.get_default(),
style_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
When text is selected, the selection is not visible. What has to be added to the "css" statement to set the highlight color and highlight-background color?
An internet search shows many results for HTML, but no examples fitting this situation. An actual example would be preferable.
I may be mistaken, but you might need to add the css "selection" pseudo element.
So try something like this:
dmsg.set_selectable(True)
dmsg.set_name("sMsg")
style_provider = Gtk.CssProvider()
css = "#sMsg { background-color: #002348; color: white; padding: 4px 8px; } #sMsg::selection {color: red; background: yellow;}"
style_provider.load_from_data(bytes(css.encode()))
Gtk.StyleContext.add_provider_for_screen(
Gdk.Screen.get_default(),
style_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
See here for more information

Customize noUiSlider handle with text and shape into circle

I'm just now becoming familiar with the noUiSlider and I googled to find examples of what exists out there with different ways to use it. Unfortunately most were adding custom images instead of adding text.
Does anyone know where or have some examples of how to design the handle in a unique way using the css or js files?
All handle styling is on the class .noUi-handle. The 'carving' on the handle is done using the :before and :after pseudo elements. You could use these elements and their content property to display text.
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF;
}
.noUi-handle:after {
content: "Some words here"; /* Add something like this */
}
If the handle text has to be updated with the slider value, you could set the value as an attribute on the slider as such:
slider.noUiSlider.on('update', function(values, handle) {
this.target.setAttribute('data-value' + handle, values[handle]);
});
And then style the handle using that attribute:
[data-value0="5"] .noUi-handle:after {
content: "Text only for value 5";
}

QPushbutton How to remove the color created by setDefault(True)

I'm currently try to custom my QPushButton in Qt (PyQt in fact). So I set StyleSheet to do it.
But the problem is that I need to set this button to Default by setDefault to True.
And if I do that, I've a sort of color drool over ... how can I get rid of it?
Here is an example:
button = QPushButton('login')
button.setDefault(True)
button.setObjectName('login')
button.setStyleSheet(
"""
QPushButton#login {
background-color: #4caf50;
color: white;
border: none;
}
QPushButton:pressed#login {
background-color: #59b75c;
}
"""
)
Button appears green, but text is not fully white... I've try to set StyleSheet on QPushButton:default But it does not change anything at all
I can see you have a small error in your code. you gave us
QPushButton:pressed#login {
background-color: #59b75c;
}
but this does not work.
The correct way to do it is
QPushButton#login:pressed {
background-color: #59b75c;
}
also, be sure that after the '#' you use the objectName of the pushButton and not the text of the button.
Here is a link with some styleSheet examples
After long searches on the internet, I finally found how to do. I've to set outline to none to remove it.
QPushButton#login {
background-color: #4caf50;
color: white;
outline: none;
}
Then slobbery color disappear.

How to set cell border and background color in QTableWidgetItem?

I have a QTableWidget with 3 columns. 2 of the columns have some text in them, but one of them is empty and I want it to have a background color. Also I want the cells to have borders.
If I do
int i = 0;
foreach (tableData el, data) {
//setting the first cell
ui->eventTable->setItem(i, 1, new QTableWidgetItem);
//ui->eventTable->item(i, 1)->setBackground(el.severityColor);
//ui->eventTable->item(i, 1)->setBackgroundColor(el.severityColor);
ui->eventTable->item(i, 1)->setData(
Qt::BackgroundRole,
QBrush(el.severityColor)
);
//setting the third cell
++i;
}
everything works as expected.
But if before this code I try to add a border with
QString style(
"QTableWidget::item {"
"border: 1px solid white;"
"}"
);
ui->eventTable->setStyleSheet(style);
the background is not set.
I tried with setBackground(), setBackgroundColor() (even though it is deprecated) and setData() as seen in the code, but the result is the same.
Also I tried setShowGrid(true) insted of the above stylesheet, but the border didn't show.
You can reproduce this by creating a table with 1 row and 1 column and trying to set the background of the cell, and then adding the stylesheet for a border.
Am I missing something? What else should I try?
As an alternative, can I target specific rows/cells in the styles, so I can build a stylesheet string that does what I want?
Edit:
I can have another styles in QTableWidget::item and they are applied, the problem is when I have a border.
I also tried to write the border style as:
border-width: 1px;
border-style: solid;
border-color: white;
but still no luck.
Also if I set the background from styles, it works. It doesn't work if I set it in code.
Here are the properties you need to get your table styled appropriately. Note that gridline-color is the property that defines the borders of the items, which is defined in QTableView and not QTableView::item.
QTableView
{
color: {color};
border: 1px solid {color};
background: {color};
gridline-color: {color};
}
QTableView::item
{
background: {color};
}
Obviously you would replace {color} with the appropriate colors for each property.
I guess you need to style the background and border properties
QTableView {
background-color : none;
}
QTableView::item {
border: 1px solid white;
background-color : none;
}

How to update "background-color" property of certain class with each record in extjs

I am working in extjs. I want to show different records with different colors. I am loading store and retriving records in callback function
taskStore.load({
url : URL_TASK,
callback: function(records, operation, success) {
if(success) {
for(var i = 0; i < records.length; i++) {
records[i].set('Cls', 'assignedTasksCls');
}
}
}
});
For each record i am setting Cls= "assignedTasksCls", which i have defined as,
.assignedTasksCls {
background-color: #51c063;
border: 1px solid #8cd191;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.5);
height: 90%;
left: -6px;
line-height: 7px;
position: relative;
}
I want to change this class's background-color property as need to set different colors to differnt records. I can get this css via= records[i].getCls();
So how to update "background-color" of this class with each record?
The way of changing the background-color is
via JQuery
$("#YourSelector").css("background-color", "yellow");
Via Extjs
suppost you have
<div id="div1">My Div 1</div>
then
Ext.onReady(function() {
Ext.get('div1').setStyle('color', 'red');
});
for Class way use
records[i].addCls("assignedTasksCls");
records[i].removeCls("assignedTasksCls")
nice example from here
also, I found good example might be usefull for your case, please check from here
Please go through the following links,
extjs change grid cell background based on value
changing background colors of grid rows dynamically
Change background color of row
See this example, it does exactly what you need.

Resources