Problem with fixed images width

Hi ;D

I’m new to gtk4 and trying to make a list of images ordered vertically. Images are different in size and could be really high/long.

Everything would be okay if I wouldn’t need all images to be the same width.

Image (this white line are images):

1667160253_445670077

Layout:

ApplicationWindow
  ScrolledWindow
    Box
      Picture
      Picture
      ...

Problem:

My problem is that for some reason, images are smaller than the available space they have.

It would be also nice if I could dynamically change this width without much of a drawback.

Related Topics:

Since yesterday I have tried using clamp from libadwaita, but my images couldn’t propertly resize to the clamp.

If can_shrink in picture was set to false, then my images went over the borders of clamp, but differently, they would be too small.

Preview (can_shrink: true)

1667215927_104212807

Layout

ApplicationWindow
  ScrolledWindow
    AdwClamp
      Box
        Picture
        Picture
        ...

Set homogeneous=true on the box (if the box is horizontal). Otherwise - hexpand=true on all the images.

Unfortunately, the box is vertical and images differ in height and width.

For some reason when I set hexpand to true on all images (GtkPicture) there is no result.

All images are crammed in the window’s boundaries and don’t overflow vertically (without can_shrink ussage), which doesn’t even allow the scrollbar to show.

As if they are locked to it (window’s boundaries).

Ah, then you need to set vscroll-policy to natural on your scrollable - i.e. manually add a GtkViewport and set it there.

1 Like

Thank you ;D, now it works.

I added a viewport with vscroll-policy to natural and connected it vadjustment to ScrolledWindow vadjustment.

Final Layout

ApplicationWindow
  ScrolledWindow
    AdwClampScrollable
      Viewport
        Box
          Picture
          Picture
          ...

Connecting vadjustments is automatic, you only need to set the scroll policy.

Not for me when I created it manually (by code).
Only when I created it with .ui, then it is automatic.

How are you creating it exactly then?

In the past I was creating it like this in vala:

var win = new Gtk.ApplicationWindow (app);

var scroll = new Gtk.ScrolledWindow ();

var clamp = new Adw.Clamp ();
clamp.set_maximum_size (500);

var box = new Box (Gtk.Orientation.VERTICAL, 0);
var view = new Viewport (null, scroll.vadjustment);
view.vscroll_policy = ScrollablePolicy.NATURAL;

try {
	var dir = Dir.open (path, 0);

	string? name = null;
	while ((name = dir.read_name ()) != null) {
		var image = new Gtk.Picture.for_filename (path + "/" + name);
		box.append (image);
	}
} catch (GLib.FileError e) {
	print ("Can't find folder.\n");
}

view.child = box;
scroll.child = view;
clamp.child = scroll;
win.child = clamp;
win.present ();

But now I’m using .ui file and it just works.

That should work without passing the adjustment, yes. In fact, I’m reasonably sure it’s null at that point anyway.

clamp.child = scroll;

Unrelated, but don’t do this. Scrolled window should never be inside a clamp, your scrollbar is not at the edge of the window atm.

:person_facepalming: I sent an old code. Never mind, but nonetheless thank you for your help.

Now that I know it is possible I can start this project.

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