How to set the width of gtk_tool_button

Platform
1 
   GtkWidget *toolbar=gtk_toolbar_new();                                                                                
   gtk_toolbar_set_style(GTK_TOOLBAR(toolbar), GTK_TOOLBAR_ICONS);                                           
   gtk_box_pack_start(GTK_BOX(rfm_main_box), toolbar, FALSE, FALSE, 0); 
   GtkWidget * button=gtk_tool_button_new(NULL, "^");
   gtk_toolbar_insert(GTK_TOOLBAR(toolbar), button, 0);

I use the code above to create toolbar and button with gtk+3.24. The button, with single character label ‘^’, looks too wide for me. How can i make it narrow? specify width in pixel? or anything to do with margin or padding?

20240829_02h43m42s_grim
20240829_02h43m42s_grim1364×248 41.7 KB

2

Hi,

You can use CSS styles to control the size, margins and paddings.

GtkToolButtons seem to have a min-width of 24px, and 8px of padding left and right, with the “Adwaita” theme. Can’t tell about the theme you use.

You can try this small stylesheet:

toolbutton.narrow > button {
    min-width: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

then apply the “narrow” class to the “^” button.

3

thanks! I had tried some CSS snippet and c code found on web before but not work, so i ask the question here. The CSS snippet i had found was different.

I just realized that i should open my gtk application with GTK_DEBUG=interactive to view the css

I would report for any difficulty applying this new css. Thanks in advance!

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

5

Follow up the closed thread:
https://discourse.gnome.org/t/how-to-set-the-width-of-gtk-tool-button/23012

the suggested css does not work as shown bellow: the upper arrow icon is still wider then needed:

20241210_21h49m23s_grim
20241210_21h49m23s_grim1360×765 155 KB

20241210_21h49m45s_grim
20241210_21h49m45s_grim1291×358 39.7 KB

UPDATE: after i change GTK_ALIGN_FILL to GTK_ALIGN_START, the left most toolbar button become narrower. However, there is still a big gap between the first button and the second one, why?

20241211_00h59m30s_grim
20241211_00h59m30s_grim1354×758 147 KB

1 Like
6

I would guess this comes from how the space for the widgets are allocated. Normally, widgets will use all the space allocated to them, if you’re not using halign or valign. When you set halign to start, the widget only uses the width it needs, but the rest of it is still allocated of this widget and can’t be used by another one.

I’m don’t know how exactly Gtk.Toolbar does allocate its widgets. However, based on your issue, I would assume it allocates the same width to each widget. Since your other widgets are wider, it gives them more space, but also the first one.

I would say the solution is to switch to using a Gtk.Box instead, as there the widgets can have variable width.

7

Thanks for replying, i would find some snippet of Gtk.Box and try.

Currently, i am using gtk_toolbar_insert to add buttons into toolbar. This function has a position parameter. I use value -1 for this parameter which means append the new button at the end. Except for the second button, the one with label ‘/home/guyuming/…’ on the screenshot. I set the position value to some positive number. However, it does not seem to have any effect regardless what the positive number is, 40, 60, 300. The second button always start at the same position as the screenshot shows.

8

Well, the position parameter here is for the position in the list of items, not an absolute position on the screen.

So, setting it to, say 5, says “insert this item after the fifth item in the toolbar”. Where the position of that fifth item is is up to what widgets are added and their size requests.