Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://vaadin.com/docs/latest/components/vertical-layout below:

Website Navigation

• UploadFile Handling
• ComponentsVirtual List

Vertical Layout component | Vaadin components

In some situations, a component with a specific, fixed size is rendered smaller than that size (and its size may vary depending on the size of the UI).

This is usually caused by the component being placed in the same Horizontal or Vertical Layout as another component with 100% (or “full”) size along the same axis.

The reason for this behavior is a combination of two aspects of Horizontal Layout and Vertical Layout:

• 100% width or height actually means the full width or height of the layout, rather than whatever space is available after any fixed-size items.

• By default, children of these layouts are allowed to shrink below their specified size. While this allows full-size items to shrink below 100% to make room for other items, it also makes fixed-size items shrink a bit.

There are three main ways to solve this issue:

By setting the flex-shrink value of the fixed size component to 0, it is prevented from shrinking below that size.

VerticalLayout layout = new VerticalLayout(fixedSizeComponent, fullSizeComponent);
fixedSizeComponent.setHeight("200px");
fullSizeComponent.setHeightFull();

layout.setFlexShrink(fixedSizeComponent, 0);
// or
fixedSizeComponent.getStyle().setFlexShrink("0");

<VerticalLayout>
  <div style={{ height: '200px', flexShrink: 0 }}></div>
  <div style={{ height: '100%' }}></div>
</VerticalLayout>

<vaadin-vertical-layout>
  <div style="height: 200px; flex-shrink: 0;"></div>
  <div style="height: 100%;"></div>
</vaadin-vertical-layout>

Instead of setting a 100% (or “full”) size, you can make a component take all available space by setting its flex-grow value to 1.

VerticalLayout layout = new VerticalLayout(fixedSizeComponent, fullSizeComponent);
fixedSizeComponent.setHeight("200px");

layout.setFlexGrow(fullSizeComponent, 1);
// or
fullSizeComponent.getStyle().setFlexGrow("1");

<VerticalLayout>
  <div style={{ height: '200px' }}></div>
  <div style={{ flexGrow: 1 }}></div>
</VerticalLayout>

<vaadin-vertical-layout>
  <div style="height: 200px;"></div>
  <div style="flex-grow: 1;"></div>
</vaadin-vertical-layout>

By enabling the layoutComponentImprovements feature flag, the Flow APIs setWidthFull, setHeightFull and setSizeFull are rewired to automatically apply flex:1 to the component. This prevents fixed-size components from shrinking and makes the full-size component take up the remaining space in the layout.

This is most commonly noticed on scroll containers like Scroller and TabSheet, or elements that have been scroll-enabled through CSS, but it can occur in other situations as well. The problem often causes extra undesired scrollbars to appear.

This is caused by the default minimum size of a layout item to be equal to the size of its contents.

There are three main ways to solve this issue:

Set the minimum size to 0 or any other specific size.

overFlowingComponent.setMinHeight("0");

<div style={{ minHeight: '0' }}></div>

<div style="min-height: 0"></div>

You can prevent the component from overflowing by setting the CSS overflow property to hidden. Be aware that this will also clip outlines and box-shadows, such as those used for focus rings.

overFlowingComponent.getStyle().setOverflow(Overflow.HIDDEN);

<div style={{ overflow: 'hidden' }}></div>

<div style="overflow: hidden"></div>

By enabling the layoutComponentImprovements feature flag, the Flow APIs setWidthFull, setHeightFull and setSizeFull are rewired to also set the minimum size of nested Horizontal and Vertical Layouts to 0, allowing them to shrink below the size of their contents.

73cc0e40-d39a-11ed-afa1-0242ac120002

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4