1

how can i remove the gap/space for QPushButton?

i'm looking at Windows 10 Calculator, which is:

enter image description here

as you can see there is no space between button 7 and 8, and i try to do the same thing in Jambi, by set the space for QGridLayout and QPushButton like so:

QVBoxLayout main_layout = new QVBoxLayout();

QGridLayout sample_layout = new QGridLayout();
sample_layout.setHorizontalSpacing(0);
sample_layout.setVerticalSpacing(0);
sample_layout.setContentsMargins(0,0,0,0);
sample_layout.setSpacing(0);
sample_layout.setWidgetSpacing(0); 

main_layout.addLayout(sample_layout);

QLineEdit edit_input = new QLineEdit();

QPushButton action_0 = new QPushButton("0");
action_0.setMinimumHeight(60);
action_0.setContentsMargins(0, 0, 0, 0);

QPushButton action_1 = new QPushButton("1");
action_1.setMinimumHeight(60);
action_1.setContentsMargins(0, 0, 0, 0);

QPushButton action_2 = new QPushButton("2");
action_2.setMinimumHeight(60);
action_2.setContentsMargins(0, 0, 0, 0);

QPushButton action_3 = new QPushButton("3");
action_3.setMinimumHeight(60);
action_3.setContentsMargins(0, 0, 0, 0);

QPushButton action_4 = new QPushButton("4");
action_4.setMinimumHeight(60);
action_4.setContentsMargins(0, 0, 0, 0);

QPushButton action_5 = new QPushButton("5");
action_5.setMinimumHeight(60);
action_5.setContentsMargins(0, 0, 0, 0);

QPushButton action_6 = new QPushButton("6");
action_6.setMinimumHeight(60);
action_6.setContentsMargins(0, 0, 0, 0);

QPushButton action_7 = new QPushButton("7");
action_7.setMinimumHeight(60);
action_7.setContentsMargins(0, 0, 0, 0);

QPushButton action_8 = new QPushButton("8");
action_8.setMinimumHeight(60);
action_8.setContentsMargins(0, 0, 0, 0);

QPushButton action_9 = new QPushButton("9");
action_9.setMinimumHeight(60);
action_9.setContentsMargins(0, 0, 0, 0);

QPushButton action_plus = new QPushButton("+");
action_plus.setMinimumHeight(120);
action_plus.setContentsMargins(0, 0, 0, 0);

QPushButton action_minus = new QPushButton("-");
action_minus.setMinimumHeight(60);
action_minus.setContentsMargins(0, 0, 0, 0);

QPushButton action_divide = new QPushButton("/");
action_divide.setMinimumHeight(60);
action_divide.setContentsMargins(0, 0, 0, 0);

QPushButton action_times = new QPushButton("X");
action_times.setMinimumHeight(60);
action_times.setContentsMargins(0, 0, 0, 0);

QPushButton action_equal = new QPushButton("=");
action_equal.setMinimumHeight(120);
action_equal.setContentsMargins(0, 0, 0, 0);

QPushButton action_dot = new QPushButton(".");
action_dot.setMinimumHeight(60);
action_dot.setContentsMargins(0, 0, 0, 0);

QPushButton action_del = new QPushButton("< Delete");
action_del.setMinimumHeight(60);
action_del.setContentsMargins(0, 0, 0, 0);

QPushButton action_clear = new QPushButton("Clear");
action_clear.setMinimumHeight(60);
action_clear.setContentsMargins(0, 0, 0, 0);

sample_layout.addWidget(edit_input,0,0,1,4);
sample_layout.addWidget(action_minus,1,0);
sample_layout.addWidget(action_divide,1,1);
sample_layout.addWidget(action_times,1,2);
sample_layout.addWidget(action_del,1,3);
sample_layout.addWidget(action_7,2,0);
sample_layout.addWidget(action_8,2,1);
sample_layout.addWidget(action_9,2,2);
sample_layout.addWidget(action_4,3,0);
sample_layout.addWidget(action_5,3,1);
sample_layout.addWidget(action_6,3,2);
sample_layout.addWidget(action_1,4,0);
sample_layout.addWidget(action_2,4,1);
sample_layout.addWidget(action_3,4,2);
sample_layout.addWidget(action_clear,5,0);
sample_layout.addWidget(action_0,5,1);
sample_layout.addWidget(action_dot,5,2);
sample_layout.addWidget(action_plus,2,3,2,1);
sample_layout.addWidget(action_equal,4,3,2,1);

but i still getting gap in between.

enter image description here

Note: if i set main_layout.setContentsMargins(0,0,0,0) and main_layout.setWidgetSpacing(0) i get perfect fit for QLineEdit like image below, but not QPushButton so i believe there is an option in QPushButton that create this gap, but there is only on option for QPushButton setContentsMargins(), any idea?

enter image description here

i did look into others that asked the same question, they use QSpacerItem which the solution doesn't make sense (Doesn't feel like correct/professional way), cause in QLineEdit it does perfectly with out any gap, but not in QPushButton.

Edit: when i apply action_plus.setFlat(true); the button turn out to be look alike this:

enter image description here

Bear
  • 550
  • 9
  • 25
  • I copy-pasted your code though I converted it to `PyQt` (but the end result is the same) and I have not spacing between the buttons at all. Also `QGridLayout` doesn't have `setWidgetSpacing()` (for both Qt4 and Qt5). I 've noticed that in your screenshot you also have a frame although you set the window to frameless mode. I run Linux and I have no frame (as the code suggests). Maybe the spacing is also some strange behaviour on Windows only? The buttons obviously have different styling by default (mine look like Win98 buttons more or less) so the spacing issue might be just because of Windows. – rbaleksandar Apr 20 '16 at 19:19
  • Btw is there a reason for `action_8.setMinimumHeight(defaultHeight);` instead of `action_8.setMinimumHeight(60);` like for all the other numerical buttons? – rbaleksandar Apr 20 '16 at 19:26
  • @rbaleksandar yeah, i was surprised that there is `setWidgetSpacing()` it show up in Eclipse and i used it(thought could help somehow, but didn't change anything). Jambi latest release is Qt 4.8.6, just now i was playing around with `stylesheet` if i change the background and border color, it fit perfectly! about stylesheet, do we have any option to invert the border? maybe as what you said is because of windows style. – Bear Apr 20 '16 at 19:27
  • If you want flat buttons simply use `your_button.setFlat(true)` and the result will be the same as in your screenshot of the Windows calculator. If that is what you mean by "invert the border". – rbaleksandar Apr 20 '16 at 19:29
  • oh, `defaultHeight` is an integer, so if i change one height all the button change as well, i forgot to change that, thought make the code look lesser. – Bear Apr 20 '16 at 19:30
  • So is the issue resolved? :) – rbaleksandar Apr 20 '16 at 19:33
  • @rbaleksandar i did for one `action_plus.setFlat(true);` whole button become transparency – Bear Apr 20 '16 at 19:33
  • let me screen shoot it – Bear Apr 20 '16 at 19:34
  • @rbaleksandar i updated the question (add the preview), what actually `setFlat()` does? – Bear Apr 20 '16 at 19:41
  • Flat means border is raised (the button seems to pop out of the surface it is attached to) if set to true. You should do some research explicitly on Qt under Windows 10 and how the styling of the UI components is affected. – rbaleksandar Apr 20 '16 at 19:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109728/discussion-between-rbaleksandar-and-bear). – rbaleksandar Apr 20 '16 at 19:50

1 Answers1

1

In order to avoid a lot of writing create a custom class which inherits from QPushButton. Inside the constructor add a call setFlat(true) which is for handling the raising of the button's border (unless overridden with styles). The stylesheet below (use setStyleSheet(...) to set your button to use it) give a nice hover effect:

QPushButton:hover{
  background-color: rgb(164, 156, 156);
  border: 0px;
}

Change the colour to your liking to fit the Windows 10 theme. You can omit the setFlat(true) and instead add 

QPushButton{
  border: 0px
}

to your stylesheet (along with the hover handler). The effect is the same.

The result is (on Linux in my case):

enter image description here

You can also flatten your QLineEdit using the border attribute in its stylesheet:

No border at all:

enter image description here

1px solid border:

enter image description here

rbaleksandar
  • 8,713
  • 7
  • 76
  • 161