[Solved] Flat and borderless QPushButton does not have the same size as the pixmap
-
Hi,
I have been using Qt Designer to design user interface. It is a great tool I must say. I believe this issue is not related to Qt Designer, but in the QPushButton itself. Qt Designer is just where I observed the issue.
I was trying to create a push button with custom pixmaps for normal, mouse rollover and click states. I chose QPushButton and set it to flat with the following style sheet:
@QPushButton {
border: none;
}
@The appearance of the icon is what I desired. But as I was looking at some details, I noticed the button's geometry is 4-pixel wider than the pixmap, but the height is the same. The pixmap is 27x101, but the widget size is 31x101 (see the attached screen shots). It seems a little odd that it behaves this way.
!http://repo.dualalign.net/hi/designer-shot1.png(Screen shot 1)!
!http://repo.dualalign.net/hi/designer-shot2.png(Screen shot 2)!For my application, I need the button to have exact same size as the pixmap. Does anyone know how to achieve it?
-
You should use border-image to achieve this.
example using an image from qrc file:
@border-image: url(:/images/yourImage.png) 1 ;@The reason for this can be found in the "Box Model":http://doc.qt.nokia.com/4.7/stylesheet-examples.html#qpushbutton-and-images. The box model has from inner to outer the contents, padding, border and the margin. If you use the contents, padding or border and you draw on it using the border-image you paint over all of them.
Also you don't need to set the icon anymore since this is handled by the stylesheet now.
-
I tried to clear margin and spacing:
@QPushButton {
border: none;
margin: 0px;
padding: 0px;
}@
The result is still the same: 4-pixel wide along x axis, whereas same size along y axis.I read through the Box Model. But I do not think it explains why there is different behavior along x and y axis. Also excuse my limited knowledge about Qt stylesheet, but if I set the border-image as the example above and remove the icon setting, the button kind of collapsed and did not maintain its shape. Its new size is 24x13.
Second, it is important to me that the button has same exact dimension as the pixmap. Even if I did the border image, during my experiment, I never achieve size 27x101. As can be seen in my screen shot, the extra 4 pixels along x axis resulted in a small gap between the widgets to its right and widgets below (I am using two QFrame as an example in the screen shot).
!http://repo.dualalign.net/hi/designer-shot3.png(shot3)! -
bq. but if I set the border-image as the example above and remove the icon setting, the button kind of collapsed and did not maintain its shape. Its new size is 24×13 .
I think the reason for that is that the image is not found in the resource system.
Can you use the image using the resource system when setting the icon in Qt Designer?I tried it out myself and it works. The only thing i did (sorry i forgot to mention it) was set the iconSize to image size(yours is 24×13) in Qt Designer properties under QAbstractButton section.
-
here is a "test ui file":http://dl.dropbox.com/u/33544011/dialogTest.ui I created using 2 images. One for normal and one for Clicked state.
Open the ui file to study what I described above. You should change the png files to yours of course ;)
-
Here is "the zip file":http://repo.dualalign.net/hi/button-issue.zip enclosing the ui, resource, and image files that I have been playing with. I did not create a project file since what I see in the Designer is consistent with the compiled binary.
-
I did. The only difference I saw is that you defined the minimum size and maximum size to be the image dimension. Once I did that in my own example, the widget size now is the same as image dimension.
I guess it is a way to "force" the button to behave. I am fine with it (for my current work), but still puzzle a bit at its strange behavior (before defining the min and max size).
-
Yes, I know it's brute force. But what you want to do is not "intended". We eliminate all the decoration of the box model and draw on the margins. Normally your OS is responsible for this and you wanted it differently.
Your button will not behave visually as a button anymore. That's why I used a second image in my example to have another color which mimics the clicking state.So if you consider this topic as solved, could you please add [Solved] in the beginning of your title by editing it?
-
Before I make the post [Solved], I do want to clarify:
The only reason why I use only one image in my example for my button is to simplify the case. Normally, in the GUI program I am writing, I would use three images for a button: normal, hover, and clicked states. I have seen many modern programs or even web pages use custom buttons like that.
I like Qt very much, but I also wish it can be a little more intuitive. For example, if I specify three images for a button, set the pad and margin to be 0, then it shall look exactly like the image. I still do not understand why it "draws on the margins" if the margin is set to 0.
