Search code examples
cgtkgtk3

Reduce button height in GTK+

I am creating a GTK+ 3 C application that has a very long list. The application needs to register when the user clicks on any of the list items. Right now I'm making the list out of GTK+ buttons because the styling is the clearest way to communicate the functionality. However the generous vertical padding means the buttons take up about twice as much space as they need to.

How would I go about reducing the height of the buttons?

The image below shows what I mean by padding and height. I would like the text to take up the majority of the vertical space, rather than the padding. This means the height needs to be reduced. enter image description here

The following is the code I use to create a button. loglist is a box element oriented vertically.

    GtkWidget* btn = gtk_button_new();
    GtkWidget* box = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
    GtkWidget* text = gtk_label_new("Data");
    gtk_box_pack_start(GTK_BOX(box), text, TRUE, TRUE, 0);
    gtk_container_add(GTK_CONTAINER(btn), box);
    gtk_widget_set_halign(text, GTK_ALIGN_START);
    gtk_button_set_relief(GTK_BUTTON(btn), GTK_RELIEF_NONE);
    gtk_box_pack_start(GTK_BOX(loglist), btn, FALSE, FALSE, 0);
Solution

  • Here is the solution I worked out using the information everyone provided me.

    GtkCssProvider* css = gtk_css_provider_new();
GdkScreen* screen = gdk_display_get_default_screen(gdk_display_get_default());
GtkStyleContext* context;

gtk_style_context_add_provider_for_screen(screen, GTK_STYLE_PROVIDER(css),
        GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
gtk_css_provider_load_from_data(css,
        "button {padding-top: 0px; padding-bottom: 0px; margin-bottom: -8px;}",
        -1, NULL);

/* Insert Buttons */
context = gtk_widget_get_style_context(btn);
gtk_style_context_add_class(context, "data_btn");
/* End Insert Buttons */

g_object_unref(css);

    The result can be seen below.

    enter image description here

    The code between the "Insert Buttons" comments need to be included with the rest of the code for inserting buttons, after the btn widget has been declared and assigned. The code I use to insert buttons can be seen in the question. I insert those two lines after the GtkWidget declarations but before anything else. I could get the same effect using the "button" tag rather than the ".data_btn" tag, but then it would affect all buttons not just the list.

    A negative margin is generally bad practice because it can and will break if themes are changed, and it needs an extra box of padding underneath all the buttons. For me it's a placeholder until I can figure something else out, it will go away in the future.

    I wanted everything to be in a single executable. If you, the person who found this through google or whatever, don't have that same goal then you would be better off using a css file. Use the gtk_css_provider_load_from_file function instead of the load_from_data function.