Make scrollable take only the available space

Learn
1

When I have the following code, the second “Hello” isn’t visible, unless the window is as big such that a scrollbar is not required anyways.

column![
  "Hello",
  scrollable(column![
      "Scroll me!",
      vertical_space().height(3000),
      "You did it!",
   ]),
   "Hello",
]

How can I give priority to the other elements besides scrollable such that the scrollable takes only as much height as height is available to not push the other elements off the window?

2

Solution:
Put .height(Fill) at the correct location.

column![
  "Hello",
  scrollable(column![
      "Scroll me!",
      vertical_space().height(3000),
      "You did it!",
   ]).height(Fill),
   "Hello",
]
3

Small explanation why this behaves in such a way can be found here: Elements in column overlay on Windows · Issue #2702 · iced-rs/iced · GitHub

4

Thanks for the explanation!

Now, I have another related problem to this:

Below the scrollable I’d like to put some text, which should stay put there.
Additionally I want to have some stuff fixed at the bottom.

In the following code, I have the problem that the scrollable doesn’t use all the available space when there is plenty. This happens as soon as I have a second Fill widget below it.
I could not figure out a way to avoid this. Additionally when the scrollable is shown without scrollbar, space arises between the scrollable and its text below it.
So my other option is to remove that second Fill.
Then however, the scrollable takes all the available space (obviously) and the text appears right above “Bottom” no matter how big the window is…

column![
    "Top",
    column![
        scrollable(column![
            "Scroll me!",
            vertical_space().height(300),
            "Scroll end!",
        ]).height(Fill),
        text("directly below scrollable")
    ],
    vertical_space().height(Fill),
    text("Bottom"),
]

The other option is to remove the Fill of the scrollable, however previous problem…

5

I did not test this, but I think it should look like this:

column![
    "Top",
    scrollable(column![
        "Scroll me!",
        vertical_space().height(300),
        "Scroll end!",
    ]).height(Fill),
    text("directly below scrollable"),
    vertical_space().height(10.0),  // We need something fixed or shrink here
    text("Bottom"),
]
6

looks like the following:

image
image325×1424 5.47 KB

→ the text isn’t directly below the scrollable (i.e. “Scroll end!”), but 10 (pixels?) above “Bottom”

7

I now see what you want to accomplish. I think you need a custom widget with custom layouting for that.

1 Like