Fit rest of space

How-to
1

Description

I have a container with two containers A and B in it. I want both A and B containers to fir the width of the parent container. Then I want A to be as high as its children need it and B to fill the left over vertical space.

I don’t see right now how to do it and it might not be possible but I wanted to ask before hard coding B’s height.

Filling the rest of the space of a parent when there are already other elements in it is a

What MCU/Processor/Board and compiler are you using?

I don’t think that matters for this question.

What do you want to achieve?

I try to have a container fill the left over space of a parent container when there are other containers in the same container already.

What have you tried so far?

I tried to use lv_cont_set_fit2 but it yields an error. It works if container A is not created but if I have A and then I fit B it yields an error. I read the documentation and I was a bit optimistic by using it but I don’t see any other function or object that could help me with that.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

    lv_obj_t* container = lv_cont_create(scr, NULL);
    lv_cont_set_layout(container, LV_LAYOUT_COL_L); /* set the layout to columns*/
    lv_obj_set_size(container, WIDTH, HEIGHT); /*Set the size of the parent container*/

    lv_obj_t* top_container = lv_cont_create(container, NULL);
    lv_obj_t* list = lv_page_create(container, NULL);
    lv_cont_set_fit2(list, LV_FIT_FLOOD, LV_FIT_FLOOD); /* When I comment this line I get no errors*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

2

Hi,

your code was almost fine. The problem is if you apply LV_FIT_FLOOD on all sides of list and apply column layout an infinite cycle will be created like this:

  1. lvgl applies the layout
  2. but sees now list's size is not the same as the parent’s size so update it.
  3. upps, now the layout is wrong, so apply it again. (move the list below the top_container)
  4. okay but now the list is smaller than the parent again so set its size to the parent again
  5. but layout should be applied again…
  6. and so on…

So all you need to do is to don’t apply LV_FIT_FLOOD on the top side because you really don’t want that side to be at the top of the parent but below top_container.

lv_obj_t* container = lv_cont_create(lv_scr_act(), NULL);
lv_cont_set_layout(container, LV_LAYOUT_COL_L); /* set the layout to columns*/
lv_obj_set_size(container, 400, 300); /*Set the size of the parent container*/

lv_obj_t* top_container = lv_cont_create(container, NULL);
lv_obj_t* list = lv_page_create(container, NULL);
lv_cont_set_fit4(list, LV_FIT_FLOOD, LV_FIT_FLOOD, LV_FIT_NONE, LV_FIT_FLOOD);

image

3

That is it, I didn’t understand what fit4 was when I first read it and forgot about it or worse ignored it every time I saw it. That is awesome.

1 Like