0

I have FlexLayout with two vertical components:

    VerticalLayout gridVerticalLayout = configureGrid();

    form = new SearchForm(employmentService, locationService);
    form.setWidth("25em");

    FlexLayout content = new FlexLayout(gridVerticalLayout, form);
    content.setFlexGrow(2, gridVerticalLayout);
    content.setFlexGrow(1, form);
    content.setFlexShrink(0, form);
    content.addClassNames("content", "gap-m");
    content.setSizeFull();

Everything works fine except one thing - when I dynamically (on the Button click) add more components to the form (component on the right side of the FlexLayout), the gridVerticalLayout doesn't occupy the new space at the bottom of the page:

enter image description here

Is it possible somehow to let gridVerticalLayout to automatically growth when the height of the entire page also growth?

UPDATED

content is added to the view class which is extended from VerticalLayout. This main VerticalLayout is configured with the following:

addClassName("all-jobs-view");
addClassName("editing");

setSizeFull();
setPadding(false);
setMargin(false);

all-jobs-view.css

@media all and (max-width: 1100px) {
  .all-jobs-view.editing .toolbar,
  .all-jobs-view.editing .vacancy-grid {
    display: none;
  }
}

gridVerticalLayout configuration:

private VerticalLayout configureGrid() {

    VerticalLayout gridVerticalLayout = new VerticalLayout();
    gridVerticalLayout.addClassNames("vacancy-grid");
    gridVerticalLayout.setPadding(false);
    gridVerticalLayout.setMargin(false);
    
    ....

    grid.setSizeFull();
    grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

    gridVerticalLayout.add(grid);

    return gridVerticalLayout;

UPDATED

devtools info:

enter image description here

alexanoid
  • 24,051
  • 54
  • 210
  • 410
  • Could you show how gridVerticalLayout is configured (are you setting any sizes or such on it?) I see a scrollbar there so I'm wondering if that's on the gridVerticalLayout itself, or on a child element? – Rolf Aug 04 '22 at 13:14
  • Updated the question with the additional info – alexanoid Aug 04 '22 at 13:19
  • Thanks. I suspect that the vertical-layout called vacancy-grid *is* stretching correctly, but the content inside it is not? And you might be able to fix that by setHeightFull on vacancy-grid. – Rolf Aug 04 '22 at 13:25
  • You could use the browser devtools to check which parts are stretching and which are not. Can't really tell from the screenshot. – Rolf Aug 04 '22 at 13:30
  • I tried to add `gridVerticalLayout.setHeightFull();` but it didn't help. I added devtools debug info to the question. Vertical layout looks strange and doesn't stretch with the right `form`. – alexanoid Aug 04 '22 at 13:36
  • Yup, the problem seems to be the all-jobs-view layout rather than the vacancy-grid layout. It's not stretching to fill the viewport despite having 100% height. That's usually caused by a missing 100% height somewhere higher up in the layout hierarchy: setting 100% height on a child element usually has no effect unless its parent also has a height defined, since it's a percentage of the parent's height. So I'm guessing there is some other container outside of all-jobs-view that is missing a height. – Rolf Aug 04 '22 at 13:48
  • Thanks! I checked everything and I have `height: 100%` everywhere.. Maybe it's related to `flex`? – alexanoid Aug 04 '22 at 14:03
  • 1
    yeah... it was `flex`. Fixed with help of this solution https://stackoverflow.com/questions/15381172/how-can-i-make-flexbox-children-100-height-of-their-parent – alexanoid Aug 04 '22 at 14:26
  • 1
    Ah, glad to hear it! Was a bit difficult to tell without being able to inspect the whole layout hierarchy. – Rolf Aug 04 '22 at 14:27

0 Answers0