CODEWITHSUNDEEP
qtqtstylesheets
danielweberdlc
danielweberdlc

Reputation: 452

custom down arrow buttons using CSS in Qt

We're developing a touch screen Qt application in C++ forms that requires a wide down arrow graphic image as well as a custom background. I've been trying to get something that works using QSS, but have thus far been defeated.

The only way I found to get a wide button (one larger than 16 pixels) is to use negative margins:

QComboBox {
    min-height:63px;
    max-height:63px;
    margin-right:47px;
    border-image:url(Resources/ComboBox_Center1.png);
    font-family:  "Franklin Gothic Medium";
    font-size:  22px;
}
QComboBox::drop-down {
    width:47px;
    border:0px;
    margin:0px;
    margin-right:-47px;
}
QComboBox::down-arrow {
    image:url(Resources/ComboBox_Right1.png);
}

This puts the button at the correct position and makes the input area the correct size, but then the down arrow only opens the combobox, not open and then close.

All other options either extend the input area onto the area (margin, border) or shrink the entire control.

Setting the background-image tag had no effect - only the border image showed the image.

Note that the border image (or background color) always shows up even under the arrow.

Is there some way to style just the input section of a combo box? It seems like that portion of the combo should have its own child selector, but I haven't seen it.

Upvotes: 1

Views: 11707

Answers (1)

Liz
Liz

Reputation: 8968

Try this...

QComboBox {
    min-height:63px;
    max-height:63px;
    font-family:  "Franklin Gothic Medium";
    font-size:  22px;
    padding: 1px 1px 1px 1px;
}
QComboBox::drop-down {
   width: 47px;
   border: 0px;
}

QComboBox::down-arrow {
    image: url(Resources/ComboBox_Right1.png);
    width: 42px;
    height: 42px;
}

Note: the width and height on the down-arrow image will depend on the image you are using. These work for my image.

There are some weird things about style-sheets - and a lot of hidden tricks. It might be worthwhile taking a few minutes to go through this which describes the basic principles behind how style sheets work. They seem easy, but even after using them for a while, I often go back to the examples and documentation.

Background images are one of those things that is not obvious. Here is something I took directly from the doc. In most cases when setting an image for the background what we really want is to set the border-image. I'm assuming the reason you don't see the "background-image" is that the combo-box is a "complex" widget - meaning that it is made up of a few others - and so that background is hidden behind them.

It is common to try the background-image property, but this has a number of drawbacks: For instance, the background will often appear hidden behind the button decoration, because it is not considered a background. In addition, if the button is resized, the entire background will be stretched or tiled, which does not always look good. It is better to use the border-image property, as it will always display the image, regardless of the background (you can combine it with a background if it has alpha values in it), and it has special settings to deal with button resizing.

As for styling the input area... assuming your QComboBox is editable, the input area is just a QLineEdit. So you could always assign a style sheet to the line edit this way

comboBox->lineEdit()->setStyleSheet(your style sheet);

I hope that helps.

Upvotes: 3

Related Questions