I'm trying to create a combo box with rounded borders including the pop-up menu, but when I set a border-radius, it doesn't apply to the background:
While searching for a way to remove this background, I found this answer: Rounded QComboBox without square box behind
To reproduce:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
QComboBox* comboBox = new QComboBox(this);
comboBox->setStyleSheet(R"(
QComboBox {
border-radius: 8px;
margin: 10px;
background-color: gray;
min-height: 32px;
}
QComboBox QAbstractItemView {
border-radius: 8px;
margin: 10px;
background-color: gray;
}
)");
comboBox->move(100, 100);
comboBox->addItem("1");
comboBox->addItem("2");
comboBox->view()->window()->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
comboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);
}
It does remove the background, but it lets a black background visible for a short:
How can I get rid of this black background?
Here's everything I already tried that didn't work:
if (comboBox->view()->parentWidget())
{
auto p = comboBox->view()->parentWidget();
p->setWindowOpacity(0);
p->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
p->setAttribute(Qt::WA_TranslucentBackground);
p->setHidden(true);
p->setAutoFillBackground( false );
}
comboBox->setAutoFillBackground( false );
comboBox->view()->setAutoFillBackground( false );
comboBox->view()->viewport()->setAutoFillBackground(false);
comboBox->view()->window()->setAutoFillBackground(false);
//comboBox->view()->setAttribute(Qt::WA_TranslucentBackground);
//comboBox->view()->viewport()->setAttribute(Qt::WA_TranslucentBackground);
//comboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);
comboBox->view()->setWindowOpacity(0);
comboBox->view()->viewport()->setWindowOpacity(0);
comboBox->view()->window()->setWindowOpacity(0);
//comboBox->view()->setHidden(true);
//comboBox->view()->viewport()->setHidden(true);
//comboBox->view()->window()->setHidden(true);
QPalette palette = comboBox->view()->palette();
palette.setColor(QPalette::Window, Qt::transparent);
comboBox->view()->setPalette(palette);
Try this. I fixed this problem before.
void setSelectComboBoxStyle(QComboBox* comboBox)
{
comboBox->setStyleSheet("QComboBox {"
"border:2px solid rgb(20,150,225);"
"border-radius: 10px;"
"padding-left: 5px;"
"background-color: white;"
"font: bold;"
"font-size: 16px;"
"color: rgb(107,107,107);}"
"QComboBox::drop-down{"
"border:none;"
"subcontrol-position: top right;"
"subcontrol-origin: padding;"
"width:40px;}"
"QScrollBar:vertical {"
"border: 1px transparent rgb(213, 218, 223);"
"background:rgb(213, 218, 223);"
"border-radius: 2px;"
"width:6px;"
"margin: 2px 0px 2px 1px;}"
"QScrollBar::handle:vertical {"
"border-radius: 2px;"
"min-height: 0px;"
"background-color: rgb(131, 131, 131);}"
"QScrollBar::add-line:vertical {"
"height: 0px;"
"subcontrol-position: bottom;"
"subcontrol-origin: margin;}"
"QScrollBar::sub-line:vertical {"
"height: 0px;"
"subcontrol-position: top;"
"subcontrol-origin: margin;}");
QListView *view = new QListView(comboBox);
view->setStyleSheet("QListView{top: 2px;"
"border:2px solid rgb(20,150,225);"
"border-radius: 8px;"
"background-color: white;"
"show-decoration-selected: 1;"
"margin-left: 0px;"
"margin-top: 6px;"
"padding-left: 5px;"
"padding-right: 6px;"
"padding-top: 6px;"
"padding-bottom: 2px;"
"font: bold;"
"font-size: 16px;}"
"QListView::item{"
"height: 30px;"
"background-color: white;"
"color: rgb(107,107,107);}"
"QListView::item:hover{"
"background-color: rgb(20, 150, 225);"
"color: white;}");
view->setCursor(Qt::PointingHandCursor);
comboBox->setView(view);
comboBox->setMaxVisibleItems(5);
comboBox->setFixedSize(500,45);
comboBox->view()->window()->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
}
qt 6.2.3 version:
void setSelectComboBoxStyle(QComboBox* comboBox)
{
comboBox->setStyleSheet("QComboBox {"
"combobox-popup: 0;"
"background: transparent;"
"border:2px solid rgb(20,150,225);"
"border-radius: 10px;"
"padding-left: 5px;"
"background-color: white;"
"font: bold;"
"font-size: 16px;"
"color: rgb(107,107,107);}"
"QComboBox::drop-down{"
"border:none;"
"subcontrol-position: top right;"
"subcontrol-origin: padding;"
"width:40px;}"
"QScrollBar:vertical {"
"border: 1px transparent rgb(213, 218, 223);"
"background:rgb(213, 218, 223);"
"border-radius: 2px;"
"width:6px;"
"margin: 2px 0px 2px 1px;}"
"QScrollBar::handle:vertical {"
"border-radius: 2px;"
"min-height: 0px;"
"background-color: rgb(131, 131, 131);}"
"QScrollBar::add-line:vertical {"
"height: 0px;"
"subcontrol-position: bottom;"
"subcontrol-origin: margin;}"
"QScrollBar::sub-line:vertical {"
"height: 0px;"
"subcontrol-position: top;"
"subcontrol-origin: margin;}");
QListView *view = new QListView(comboBox);
view->setStyleSheet("QListView{top: 2px;"
"border:2px solid rgb(20,150,225);"
"border-radius: 8px;"
"background-color: white;"
"show-decoration-selected: 1;"
"padding-left: 5px;"
"padding-right: 6px;"
"padding-top: 6px;"
"padding-bottom: 2px;"
"font: bold;"
"font-size: 16px;}"
"QListView::item{"
"height: 30px;"
"background-color: white;"
"color: rgb(107,107,107);}"
"QListView::item:hover{"
"background-color: rgb(20, 150, 225);"
"color: white;}");
view->setCursor(Qt::PointingHandCursor);
comboBox->setView(view);
comboBox->setMaxVisibleItems(5);
comboBox->view()->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
comboBox->setFixedSize(500,45);
comboBox->view()->window()->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
}
Using Qt 5.15.2, here is what it work on my machine:
QComboBox *comboBox = new QComboBox(this);
comboBox->setStyleSheet("QComboBox {"
"combobox-popup: 0;"
"border-radius: 8px;"
"margin: 10px;"
"background-color: gray;"
"min-height: 32px;"
"}");
comboBox->view()->setStyleSheet("QListView{"
"border-radius: 8px;"
"background-color: gray;"
"margin: 10px;"
"}");
comboBox->move(100, 100);
comboBox->addItem("1");
comboBox->addItem("2");
comboBox->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint
| Qt::NoDropShadowWindowHint);
comboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);
}
Related
Please tell me how to correctly specify the arguments for the fact that all the buttons on the form had a style when you hover the mouse over these buttons? In addition to the style for the button, there is also a style for the form itself.
I specify it in the constructor:
{
ui->setupUi(this);
this->setStyleSheet("background: rgb(49, 54, 59); color: rgb(220, 221, 218); selection-color: lightyellow; selection-background-color: darkcyan;"
"QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
}
It works if I only specify a separate style for the button, but I need to combine all the styles into one entry.
this->setStyleSheet("QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
I think you are looking for this
this->setStyleSheet("QWidget { background: rgb(49, 54, 59); color: rgb(220, 221, 218); selection-color: lightyellow; selection-background-color: darkcyan; }"
" QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
If your main form is QMainWindow you can also set style only for QMainWindow but not for all QWidgets
this->setStyleSheet("QMainWindow { background: rgb(49, 54, 59); color: rgb(220, 221, 218); selection-color: lightyellow; selection-background-color: darkcyan; }"
" QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
How can i make QTabWidget's corners rounded? Not Tab's, but frame's (?)
I tried:
QTabWidget{
border-radius: 7px;
}
But it isn't working.
QSS for tabs:
QTabBar::tab {
background-color: qlineargradient(x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgb(253,250,250), stop:0.2 rgb(253,250,250), stop:1 rgb(255,249,234));
border-top-left-radius: 7px;
border-top-right-radius: 7px;
min-width: 8ex;
padding: 5px;
}
QTabBar::tab:selected {
background-color: rgb(253,250,250);
}
QTabBar::tab:!selected {
margin-top: 5px;
background: qlineargradient(x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgb(253,250,250), stop:0.2 rgb(253,250,250), stop:1 rgb(250,244,229));
color: rgb(93, 109, 109)
}
Just tested this (black color and thick frame just to see something) and should thus work:
QTabWidget::pane {border: 3px solid black; border-radius: 7px;}
I need badly to increase size of handle for my slider, but no css options can do this(styleSheet()).
The default example from Qt docs didn't help me as well.
I have a slider like this:
I wish to increase the height of its handle, as shown on explanation image below, but I can't guess how to do it. Probably the only way is to subclass QAbstractSlider?
Here is the stylesheet from my code:
"QSlider::groove:horizontal {"
"border: 1px solid #999999;"
"height: 32px;" /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
"background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);"
"margin: 2px 0; }"
"QSlider::handle:horizontal {"
"background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);"
"border: 1px solid #5c5c5c;"
"width: 40px;"
"margin: -20px 0;" /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
"border-radius: 3px;}"
);
Use this stylesheet:
.QSlider {
min-height: 68px;
max-height: 68px;
background: #5F4141;
}
.QSlider::groove:horizontal {
border: 1px solid #262626;
height: 5px;
background: #393939;
margin: 0 12px;
}
.QSlider::handle:horizontal {
background: #22B14C;
border: 5px solid #B5E61D;
width: 23px;
height: 100px;
margin: -24px -12px;
}
It will produce the following:
Please note the the height of the slider is made constant by setting both min-height and max-height to the same value.
I copied your exact code into a form in Qt Designer. The slider handle looks large enough.
However, when adding a layout, the whole slider's size isn't large enough to show the complete handle. I simply added this:
QSlider {
height: 80px;
}
And get this result:
I want to build a dropdown list control with QPushButton and QMenu like below:
QPushButton* menuBt = new QPushButton("Please select");
menuBt->setFlat(true);
QMenu* menu = new QMenu();
menuBt->setMenu(menu);
QWidgetAction* wa1 = new QWidgetAction(menu);
QLabel* l1 = new QLabel("Option1");
wa1->setDefaultWidget(l1);
menu->addAction(wa1);
QWidgetAction* wa2 = new QWidgetAction(menu);
QLabel* l2 = new QLabel("Option2");
wa2->setDefaultWidget(l2);
menu->addAction(wa2);
menu->setStyleSheet("QMenu::item {font-family: \"Arial\"; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);}"
"QMenu::item:hover {background-color: rgb(0, 0, 255);}");
menuBt->setStyleSheet("QPushButton {font-family: \"Arial\"; font-size: 13pt; color: #808080; border: 1px solid gray;padding: 1px 18px 1px 3px;min-width: 6em; background-color: rgb(234,234,234);}");
I set the font and hover background color to the menu items by setStyleSheet, but seems it doesn't work.
How make the font and hover background color work on menu items?
Answer:
class QTDropDownButton : public QPushButton
{
Q_OBJECT
public:
QTDropDownButton(QString text, QWidget *parent = nullptr);
void addItem(QString text);
protected slots:
void menuAboutToShow();
private:
QMenu* menu_;
};
QTDropDownButton::QTDropDownButton(QString text, QWidget *parent) :
QPushButton(text, parent)
{
setFlat(true);
menu_ = new QMenu();
setMenu(menu_);
connect(menu_, SIGNAL(aboutToShow()), this, SLOT(menuAboutToShow()));
setStyleSheet("font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);");
menu_->setStyleSheet("QMenu::item {font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);}"
"QMenu::item:selected {background-color: rgb(0, 255, 255);}"
"QLabel {font-family: Arial; font-size: 13pt;}"
"QLabel:hover {background-color: rgb(0, 0, 255);}");
}
void QTDropDownButton::addItem(QString text)
{
if(!menu_)
return;
QWidgetAction* wa1 = new QWidgetAction(menu_);
QLabel* l1 = new QLabel(text);
wa1->setDefaultWidget(l1);
menu_->addAction(wa1);
}
void QTDropDownButton::menuAboutToShow()
{
if(menu_)
menu_->setFixedWidth(this->width());
}
To set the font-family you don't need to put quotes around the Arial. I believe this prevents your style sheet from parsing correctly.
A side note: at the moment only your menuBt is styled, other buttons will look like default buttons. To change button style for all buttons in the menu, move the style into the setStylesheet() call of the menu like this:
menu->setStyleSheet("QMenu::item {font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);}" +
"QMenu::item:hover {background-color: rgb(0, 0, 255);}" +
"QPushButton {font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray;padding: 1px 18px 1px 3px;min-width: 6em; background-color: rgb(234,234,234);}");
But if you want only this one button to look different, it is correct to call
setStylesheet() on it, but you can omit the selector, like this:
menuBt->setStyleSheet("font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray;padding: 1px 18px 1px 3px;min-width: 6em; background-color: rgb(234,234,234);");
I am attempting to add items to QStandardItemModel all of these items are of type QStandardItem. I wanted to know if there was a way to attach a QPushButton to the model.
In other words are they any properties of QStandardItem that I could alter to make it appear as a push Button
Using style sheets is your best bet. Here is an example where I styled the items in a QListWidget to look like tabs. A little massage can give it a button look.
/* make the property editor list look like tabs */
QListWidget#PropertyEditor_List
{
background-color: Transparent;
padding-right: 0px;
padding-top: 2px;
padding-left: 2px;
}
QListWidget#PropertyEditor_List::item
{
padding: 3px;
margin-left: 3px;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 white, stop:1 Transparent);
border-left: 1px solid rgb(145,155,155);
border-top: 1px solid rgb(145,155,155);
border-bottom: 1px solid rgb(145,155,155);
border-right: 0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
QListWidget#PropertyEditor_List::item:hover, QListWidget#PropertyEditor_List::item:selected
{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(255,200,60), stop:0.039 rgb(255,200,60), stop:0.04 white, stop:0.4 white, stop:1 Transparent);
border-left-color: rgb(230,139,44);
}
QListWidget#PropertyEditor_List::item:selected
{
margin-left: 0px;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(255,200,60), stop:0.039 rgb(255,200,60), stop:0.04 white);
border-left-color: rgb(230,139,44);
color: black;
}