Styling the button widget for a dropdown

[patknight]

Hi,

I’m developing an Adw application. As such, the buttons in my toolbar are flat following the Adw guidelines.

My toolbar contains a Dropdown widget and libadwaita doesn’t take care of automatically flattening it.I work around this by getting the first child of the dropdown (the togglebutton) and add the ‘flat’ CSS style.

In Python

cb = Gtk.Dropdown.new_from_strings(['a', 'b', 'c'])
cb.get_first_child().add_css_class('flat')

Given there’s no ‘get_toggle_button’ method for the dropdown, is there a better way of doing this? It works, but it will break if the order of widgets under Gtk.Dropdown ever changes.

Cheers,
Pat

[kriptolix (Diego C Sampaio)]

You can add css directly to the button. First you must add a “name” property to the dropdown and choose a name for it. This name will serve as a selector to css (for example: “my_dd”). So just add it to your general css using the background color of your toolbar as background (probably @headerbar_bg_color)

#my_dd button {
   background: @headerbar_bg_color;
}

[bragefuglseth]

I use this approach for my apps. It takes various button states and high contrast mode into account as well:

.flat-dropdown > button:not(:checked):not(:hover) {
  background: transparent;
  box-shadow: none;
}

[patknight]

Thank you both @kriptolix and @bragefuglseth. I went with the “flat-dropdown” detail as it handles more cases.

Cheers,
Pat

cc @xingyun86 as you appear to have solved this the way I did originally, but the CSS approach seems better.

[xingyun86]

yeah,you are right.your method is better.