Layout with autosizing or expanding spacer?

[Dibo]

Hi,

After writting bindings for Free Pascal:

https://github.com/dibok/PasFLTK

... I'm now practicing in this framework and migrating my apps from Qt. I'm very excited about that. After few evenings of reading about Fl_Flex, Fl_Group, Fl_Grid, Fl_Pack and analyzing demos, I can't figure out one thing. Is there any functionality which "squash" container into its content by scalling all childs to its "preferred" size? For example if button has label / caption then it doesn't allow set button's bounds smaller than text? Or anything like expanding spacer (Fl_Flex has only Fixed spacer)? Seems like I must set fixed sizes everywhere even on layouts by itself. That is fine until you use locales in your app and some words are longer in other languages or user use non-standard font size in OS (people with deteriorated eyesight). One video is worth a thousand words so I made one which explain what I want to retrieve:

https://drive.google.com/file/d/1qPwlED5KfWv2Mdu6PwjxBOCQ7wtdNk7-/view?usp=sharing

Regards

[Greg Ercolano]

On 6/25/26 12:27, Dibo wrote:

After few evenings of reading about Fl_Flex, Fl_Group, Fl_Grid, Fl_Pack and analyzing demos, I can't figure out one thing. Is there any functionality which "squash" container into its content by scalling all childs to its "preferred" size?

    Albrecht is our Fl_Flex expert, but I thought I'd chime in that probably Fl_Flex can do all that.

    Sounds like you read the docs, but also check out the 'test/flex_demo', which I think demos most if not all of the behavior you want.

    For a flexible spacer (such as between the two "PushButton"s at the top of your video towards the end),
    just put an empty box between the buttons, and it will act as the sproingy empty area between them, e.g.

• Create an Fl_Flex group that is Fl_Flex::HORIZONTAL, and begin() it, and add the three child widgets
1. Add the left button making it Fl_Flex::fixed() in size
2. Add an empty box and by default it will "flex" (making it the invisible "flexible spacer")
3. Add the right button making it fixed() in size
• end() the Fl_Flex group

    That way the buttons remain fixed size, and the empty box between is the flexible spacer between them.
    Here's a compilable example showing just that bit:

---

#include <FL/Fl.H>
#include <FL/Fl_Double_Window.H>
#include <FL/Fl_Flex.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Button.H>

int main(int argc, char **argv) {
  Fl_Button *but = 0;
  Fl_Box    *box = 0;

  Fl_Window *window = new Fl_Double_Window(500, 300, "Flex Demo");
  Fl_Flex *row1 = new Fl_Flex(10, 120, 500-20, 100, Fl_Flex::HORIZONTAL);
  row1->box(FL_ENGRAVED_FRAME);
  row1->begin();
    but = new Fl_Button(0,0,120,30,"Left");  row1->fixed(but, 120);  // make Left fixed width
    box = new Fl_Box(0,0,120,30);            box->box(FL_FLAT_BOX);  // flexible box between two buttons
    but = new Fl_Button(0,0,120,30,"Right"); row1->fixed(but, 120);  // make Right fixed width
  row1->end();
  window->resizable(window);
  window->size_range(500, 300);
  window->show();
  return Fl::run();
}

---

    The test/flex_demo shows how you can put Fl_Flex inside Fl_Flex to make more complex arrangements.

[Greg Ercolano]

On 6/25/26 12:27, Dibo wrote:

For example if button has label / caption then it doesn't allow set button's bounds smaller than text?

    For that you probably have to make your own calculations using either fl_measure() or fl_text_extents()  to determine how much rectangular space (width,height) a given text string/font/font size consumes, and then use that to limit the widget's minimum size inside Fl_Flex.

    I thought we had a clear visual diagram in the docs showing the difference between the values fl_measure() returned, and fl_text_extents(), perhaps it was just screenshots from our "test/unittests" program, but basically fl_text_extents() returns the outer perimeter of a text string's drawn pixels, whereas fl_measure() is more about how much logical space is needed for text (so even a string that is just spaces occupies the amount of space covered by the spaces themselves), e.g.

I believe those last three boxes shows a line of single quotes, a line of dashes, and a line of underbars, the green boxes showing the fl_text_extents() perimeter, and the red box fl_measure()'s perimeter. Before using either function, it's recommended you first set the current font and font size using fl_font() before calling either of those functions.

[Dibo]

Thank you guys for all your hints! I'll check it out this evening :)

[Albrecht Schlosser]

On 6/25/26 21:27 Dibo wrote:
> After writting bindings for Free Pascal:
> https://github.com/dibok/PasFLTK
> ... I'm now practicing in this framework and migrating my apps from
> Qt. I'm very excited about that.

Great! Welcome to the FLTK world, and thank you very much for the Pascal
bindings, although I personally don't use Pascal. I used it a very, very
long time ago in a project during my studies, but never again.

> After few evenings of reading about Fl_Flex, Fl_Group, Fl_Grid,
> Fl_Pack and analyzing demos, I can't figure out one thing. Is there
> any functionality which "squash" container into its content by
> scalling all childs to its "preferred" size? For example if button has
> label / caption then it doesn't allow set button's bounds smaller than
> text? Or anything like expanding spacer (Fl_Flex has only Fixed
> spacer)? Seems like I must set fixed sizes everywhere even on layouts
> by itself. That is fine until you use locales in your app and some
> words are longer in other languages or user use non-standard font size
> in OS (people with deteriorated eyesight). One video is worth a
> thousand words so I made one which explain what I want to retrieve:
> https://drive.google.com/file/d/1qPwlED5KfWv2Mdu6PwjxBOCQ7wtdNk7-/view?usp=sharing

We don't have "spacer" widgets or other widgets that shrink to a size
determined by their contents (text). As Greg wrote, you can determine
the bounds of text yourself. If you localize your app you need to
measure the text with the localized strings, obviously. This should be
doable, but it needs some coding.

Note also that FLTK is written in C++ for good reasons. This allows the
user to derive their own classes that do specialized things like
My_Shrink_Button, My_Text_Box, etc. which can do what you want to
achieve, but you must still arrange them in (flexible) container
widgets. I'm not sure if you can do that with your Pascal bindings which
are based on the C bindings of FLTK. But maybe you can, somehow?

Anyway, talking further about pure (C++) FLTK.

Fl_Pack exists and has some "shrinking" behavior, but I don't recommend
to use it in new software. This has been an early contribution but has
some issues with resizing etc.. If you try it, it may work well, but at
some time you may encounter issues.

Fl_Flex is a new widget since FLTK 1.4 and can be used like Fl_Pack, but
it integrates better with FLTK's resizing. Fl_Flex widgets can be nested
to produce more complex layouts, e.g. one horizontal Fl_Flex as
container of columns which can contain vertical Fl_Flex widgets for the
contents of columns. Since each Fl_Flex can either be one column or one
row, its use is limited. Also, its flexibility is kind of "all or
nothing", i.e. the free space is divided evenly among all non-fixed widgets.

Fl_Grid is the most flexible container widget provided by FLTK. As its
name says, it is based on a grid (aka table) layout, where you can put
widgets at any (x, y) position in the grid. Of course you can also limit
it only to one column (vertical) or own row (horizontal) of widgets.
There are also many attributes you can set for most flexibility,
particularly a "weight" per row or column that determines how much of
the free space is distributed to this particular cell of the grid.
Finally, Fl_Grid widgets can also be nested, and they can also contain
Fl_Flex widgets if needed. As I said, this is the most flexible layout
(container) widget you can use in FLTK. I recommend it for all kinds of
flexible layouts.

Besides that, normal Fl_Group widgets can also be used, but their
resizable() widget is limited in its way to determine the final layout.
It's also hard to understand how it works (at a first glance), and
flexible layouts may often need nested Fl_Group widgets. You may want to
make a basic layout of some normal Fl_Group widgets that contain Fl_Grid
widgets and so on.

If you like, you may compare test/cube.cxx before and after commit
38871c5b3192bccd508f3686413d4e56041ab091 to get an impression of the
complexity of Fl_Group based layouts vs. Fl_Grid based ones. Although
the number of lines of code didn't change significantly, the new code is
much simpler and clearer.

I hope this helps. Have fun!

[Albrecht Schlosser]

On 6/26/26 05:50 Greg Ercolano wrote:

On 6/25/26 12:27, Dibo wrote:

For example if button has label / caption then it doesn't allow set button's bounds smaller than text?

    For that you probably have to make your own calculations using either fl_measure() or fl_text_extents()  to determine how much rectangular space (width,height) a given text string/font/font size consumes, and then use that to limit the widget's minimum size inside Fl_Flex.

[... more good details elided ...]

Just for clarification: fl_measure() should be sufficient to measure the required space of text in a widget. It is known to be faster than fl_text_extents() - alhough I can't tell how much faster. Therefore fl_measure() would be my choice in this case.

BTW, the same would apply to Fl_Grid as well.

[Dibo]

That is what I call a valuable and comprehensive information, thank you Albrecht-S! My next goal after PasFLTK is to start PasFLTKWidgets which will be object oriented wrapper arround PasFLTK, actually I already started it. Now everything is clear for me. FLTK gave me tools and parts, now I have to make car. With information you all gave me here now I know how to implement autosizing in my widgets, it sound quite easy and clear