[Solved] Flat and borderless QPushButton does not have the same size as the pixmap
-
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.
