Gtk Progress bar height

Question

I'm developing a Gtk application in c++. (Gtk 3.0). My problem is that I can't change ProgressBar height! (https://developer.gnome.org/gtk3/stable/GtkProgressBar.html)

The picture below will show what I need. In general I would like to have a possibility to set up height of progress bar in my code.progress bar height

I'm using following command to compile my example:

gcc progress.cpp `pkg-config --cflags gtk+-3.0` `pkg-config --libs gtk+-3.0

This the sample of my code:

#include <gtk/gtk.h>

static gboolean
fill (gpointer   user_data)
{
  GtkWidget *progress_bar = user_data;

  /*Get the current progress*/
  gdouble fraction;
  fraction = gtk_progress_bar_get_fraction (GTK_PROGRESS_BAR (progress_bar));

  /*Increase the bar by 10% each time this function is called*/
  fraction += 0.1;

  /*Fill in the bar with the new fraction*/
  gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (progress_bar), fraction);

  /*Ensures that the fraction stays below 1.0*/
  if (fraction < 1.0) 
    return TRUE;

  return FALSE;
}


static void
activate (GtkApplication *app,
          gpointer        user_data)
{
  GtkWidget *window;
  GtkWidget *progress_bar;

  gdouble fraction = 0.0;

  /*Create a window with a title, and a default size*/
  window = gtk_application_window_new (app);
  gtk_window_set_title (GTK_WINDOW (window), "ProgressBar Example");
  gtk_window_set_default_size (GTK_WINDOW (window), 220, 20);

  /*Create a progressbar and add it to the window*/
  progress_bar = gtk_progress_bar_new ();
  gtk_container_add (GTK_CONTAINER (window), progress_bar);

  /*Fill in the given fraction of the bar. Has to be between 0.0-1.0 inclusive*/
  gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (progress_bar), fraction);

  /*Use the created fill function every 500 milliseconds*/
  g_timeout_add (500, fill, GTK_PROGRESS_BAR (progress_bar));

  gtk_widget_show_all (window);
}


int
main (int argc, char **argv)
{
  GtkApplication *app;
  int status;

  app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
  g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
  status = g_application_run (G_APPLICATION (app), argc, argv);
  g_object_unref (app);

  return status;
}

You will need to use CSS for this. See the [GtkProgressBar](https://developer.gnome.org/gtk3/stable/GtkProgressBar.html#GtkProgressBar.style-properties) [documentation](https://developer.gnome.org/gtk3/stable/GtkProgressBar.html#GtkProgressBar.description) for details. Note that if you need to run on GTK+ 3.18 or earlier, you'll also need to provide alternates with slightly different selectors; these aren't as well documented. I don't know what the magic incantations are off the top of my head, sorry. — andlabs, May 31 '17 at 17:41
Also note that every theme uses a different height by default, so IDK what the best "general" option is (for instance, to make it as tall as a button). — andlabs, May 31 '17 at 17:46
Hi, thank you very much. I've modified my style.css by adding GtkProgressBar { -GtkProgressBar-min-horizontal-bar-height: 30px; } And it made my day :) — Humpt, May 31 '17 at 18:30

Alan Kinnaman · Answer 1 · 2018-03-19T16:51:33.440

6

For GTK 3.20 and newer, when defining the CSS, it seems that, instead of using the progressbar class, you must use the progress and trough classes. This is what worked for me:

progress, trough {
  min-height: 30px;
}

edited Mar 19 '18 at 16:51

answered Mar 19 '18 at 16:35

Alan Kinnaman

877
12
20

Thanks! I use `em` instead of `px`, I think it's better. For example: `progress, trough {min-height: 0.5em;}` – saeedgnu Nov 14 '21 at 20:43

Gtk Progress bar height

1 Answers1