Gtk progressbar setting CSS min-width has no effect

Question

I try to use a smaller horizontal Gtk::ProgressBar in my project.

The standard minimum width as defined in /usr/share/themes/Adwaita-maia/gtk-4.0/gtk.css is 150px :

progressbar.horizontal > trough {
    min-width: 150px;
}

When I change the 150px to 50px in this file I can squeeze the Gtk::ProgressBar smaller than 150px in the application.

So I tried to override this. In the header file, there are the class members

Gtk::ProgressBar **progressBar_channel_buffers;
Glib::RefPtr<Gtk::CssProvider> m_refCssProvider;

In the constructor, I tried

m_refCssProvider = Gtk::CssProvider::create();
m_refCssProvider->load_from_data("progressbar.horizontal  {"
                                 "min-width: 50px;"
                               "}");

progressBar_channel_buffers = new Gtk::ProgressBar*[num_channels];
for (int i = 0; i < num_channels; i++){
    progressBar_channel_buffers[i] = new Gtk::ProgressBar;
    progressBar_channel_buffers[i]->get_style_context()->add_provider(m_refCssProvider, 1000);
}

This has no effect and I wonder why. When I change for example another CSS property I can see an effect. As an example

m_refCssProvider->load_from_data("progressbar.horizontal > trough, progressbar.horizontal > trough > progress  {"
                                 "min-height: 50px;"
                               "}");

shows the expected effect.

Can you please help me? What am I doing wrong? I started programming Gtk(mm) this week and now I am at a point where I have no idea.

NoDakker · Answer 1 · 2022-04-18T16:27:03.693

If I am reading your code correctly above, I think the only thing you did incorrectly was mistype the style attribute you were wanting to modify (height instead of width). In your code snippet, it states:

m_refCssProvider->load_from_data("progressbar.horizontal  {"
                             "min-height: 50px;"
                           "}");

Whereas, I think you meant to type:

m_refCssProvider->load_from_data("progressbar.horizontal  {"
                             "min-width: 50px;"
                           "}");

Also, having poked around in the source code for GTK4, I did see that the progressbar widget is actually comprised of a child "trough" widget and a child "progress" widget. That leads me to deduce that the ultimate minimum width of the progress bar that is displayed would be limited to the largest value for minimum width for either the progress bar widget or its children widgets. Therefore, you would need to utilize the "load_from_data" statement where you not only apply the minimum width value to the progress bar node, but also to the trough node and the progress node.

I hope that makes sense.

Regards.

Thanks for your answer. Indeed I have mixed up the code example. When I try to set min-width (what actually is what I want) nothing changes. When I try to change min-height instead it works as intended. I also tried to set every node by using `m_refCssProvider->load_from_data("progressbar, trough, progress { min-width: 50px; }" );` with no luck... — chris_chris, Apr 19 '22 at 18:20
This might sound quirky, but if you are only working with one progress bar on the display, you might try to associate your CSS provider with the display instead of with the widget. I can't specifically say why, but I had inconsistent behavior with the trough attributes in a sample program I built. I got the program to behave when I associated the CSS with the display instead of the progress bar widget. You would use the "gtk_style_context_add_provider_for_display" statement for that. — NoDakker, Apr 19 '22 at 20:55

Gtk progressbar setting CSS min-width has no effect

1 Answers1