0

When I try to set multiple styles on a widget, only the first one is applied.

I want to remove the border that appears when I hover on my QToolButton as well as the down arrow from the menu.

Basically the button contains a menu that sets the speed of an animation, like a video player.

Here's my code:

ui->tool_speed_button->setStyleSheet("border: none; QToolButton::down-arrow {image: none;}");

Here's the border and the down arrow:

My QToolButton

Whether I put that code snippet in my code or if I set the style directly on the Qt Designer, it still only apply the first style in both cases.

How can I apply both styles to the same object?

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
JeyzerMC
  • 141
  • 5

1 Answers1

0

If you are applying styles to multiple objects or children under the widget, you need to group your parameters to the object you want to apply it to.

In your stylesheet string, you left "border: none;" dangling but also have a style for a QToolButton. You can d0 such a thing only if you are applying styles only to tool_speed_button.

Try something like this:

ui->tool_speed_button->setStyleSheet("QWidget{border: none; }QToolButton::down-arrow {image: none;}");

You will need to replace Qwidget with the type of tool_speed_button. When you start a project in Qt, you can check the stylesheet of your MainWindow in the designer file for more examples on how to format stylesheets.

In your case, you would do this:

ui->tool_speed_button->setStyleSheet("QToolButton::down-arrow {border: none;image: none;}");

Edit

Just wanted to add an explanation for what the first stylesheet example in my answer means:

In the style string, the first group QWidget{border:none;} applies the style to any QWidget that belongs to tool_speed_button.

QToolButton::down-arrow {image: none;} applies the style only for any QToolButton that belongs to tool_speed_button and is also of type down-arrow (which is a property of QToolButton). Since tool_speed_button is a QToolButton itself, it applies the style specified in the braces to itself and all its children.

Edit:

I was wrong. You can have dangling style sheet attribute along without grouped ones under curly braces as the question suggests. The dangling attributes just apply to all relevant objects in the widget.

Community
  • 1
  • 1
Aditya
  • 439
  • 4
  • 14
  • Thank you for the in depth answer! Sadly, it did not work in my application.. I also tried subclassing my QToolbutton to a new object, apply one of the styles to the new object and the second to the specific QToolbutton and it still did not work. – JeyzerMC Jun 20 '18 at 18:16
  • @JeyzerMC When you edit your stylesheet in Qt Desginer, does it show "Stylesheet valid" or "Stylesheet invalid"? – Aditya Jun 21 '18 at 18:27
  • It says "Stylesheet valid" – JeyzerMC Jun 21 '18 at 18:54
  • @JeyzerMC What are you exactly trying to do here? Are you trying to remove the down arrow and want only the `...` with no border? – Aditya Jun 26 '18 at 14:48
  • Yes, I just want the minimal icon '...' as my button and when I click on it the menu should appear. – JeyzerMC Jun 26 '18 at 15:25
  • @JeyzerMC You can remove the arrow on the right hand side pane in Qt Designer. There is a field called arrow type. Select `No Arrow` in that. In stylesheet, just put `border:none;` – Aditya Jun 26 '18 at 15:29
  • @JeyzerMC I will edit if you can confirm that it works – Aditya Jun 26 '18 at 15:52