Border/Padding/Margin added to module after switch to AButton

[ppascher]

Since commit (bisected) button: Add AButton class
I get a border (maybe padding, margin?) next to my custom arrow module - before/after:

Each arrow is a simple separate custom module using the background-/font-color of the next/previous module.

#clock.time {                                                                   
  background: #2e3440;                                                          
  color: #e5e9f0;                                                               
  font-weight: bold;                                                            
}                                                                               
#custom-arrow10 {                                                               
  font-size: 17px;                                                              
  color: #2e3440;                                                               
  background: #3b4252;                                                          
}                                                                               
                                                                                
#clock.date {                                                                   
  background: #3b4252;                                                          
  color: #e5e9f0;                                                               
  font-weight: bold;                                                            
}                                                      

I tried setting border/margin/padding/box-shadow to 0 or none.
Is there a way to restore the previous behavior?

[Alexays]

@pinselimo any ideas on that? thx :)

[pinselimo]

That could very well be the border value set in #1729

@ppascher have you tried it after the latest merge today?

I can check it tomorrow, am on mobile atm

[ppascher]

I tried both before and after that commit. Issue exists in both.
My config code for the custom arrow is simply:

"custom/arrow1": {
        "format": "",
        "tooltip": false
    },

Thank you for looking into this.

edit: setting the font size for the arrow from 17px to 27px and the padding is gone.

[pinselimo]

edit: setting the font size for the arrow from 17px to 27px and the padding is gone.

I found that you can also set the margin-right to a negative value.

It doesn't seem to affect all text. The clock module has no extra margins. I also tried to set all button margins to zero in src/AButton.cpp itself to no effect.

[pinselimo]

Adding a space in front of the icon also fixes the issue.

[pinselimo]

Ok, I found the definite solution to the problem. Setting min-width to zero resolves the problem for all arrows without having to change each and every one of them:

* {
...
    min-width: 0;
...
}

[Alexays]

@pinselimo Can we force the min width on the code side, in that way we don't have a breaking change for the next version.

[ppascher]

Thank you @pinselimo. Adding min-width: 0 to my styles.css fixed the issue.

[pinselimo]

@pinselimo Can we force the min width on the code side, in that way we don't have a breaking change for the next version.

Do you know how? Because for all I could google there is no setter for this property in GTK Buttons or Widgets.

Edit: I also tried .set_min_width in case it was undocumented and the build failed.

EEdit: I'll checkout if .set_size_request is the way to go or I find any other solution.

[Scrumplex]

I was using min-width and min-height to set the aspect ratio of my buttons to 1:1.

Now it doesn't work anymore and I don't know how to override this style.

Waybar/src/AButton.cpp

Lines 22 to 25 in 1374b0f

	/* https://github.com/Alexays/Waybar/issues/1731 */
	auto css = Gtk::CssProvider::create();
	css->load_from_data("button { min-width: 0; }");
	button_.get_style_context()->add_provider(css, GTK_STYLE_PROVIDER_PRIORITY_USER);

[pinselimo]

@Scrumplex I can look into it. Would you mind sharing the config snippet you used to achieve that aspect ratio?

[Scrumplex]

I basically just set

button {
  min-width: 32px;
  min-height: 32px;
}

Edit: but min-width gets overidden by the style set in code

[Alexays]

@Scrumplex Can you try with latest commit (d48eebd)

[Scrumplex]

@Scrumplex Can you try with latest commit (d48eebd)

That works!