Framework: Min-Max limits for component width/height

Created on 12 Dec 2010 · 26Comments · Source: vaadin/framework

Originally by @jojule

For more flexible automatic layouts min-max sizing is sometimes needed. See http://cappuccino.org/learn/tutorials/automatic-layout/ for a nice example implemented by a competitor.

We should create LimitedSizeable interface extends Sizeable that includes:

float getMinWidth()
setMinWidth(String)
setMinWidth(float, int unit)
int getMinWidthUnits()
setMinWidthUnits(int unit)
float getMinHeight()
setMinHeight(String)
setMinHeight(float, int unit)
int getMinHeightUnits()
setMinHeightUnits(int unit)
float getMaxWidth()
setMaxWidth(String)
setMaxWidth(float, int unit)
int getMaxWidthUnits()
setMaxWidthUnits(int unit)
float getMaxHeight()
setMaxHeight(String)
setMaxHeight(float, int unit)
int getMaxHeightUnits()
setMaxHeightUnits(int unit)

LimitedSizeable interface should be implemented by all classes that implement Sizeable today.

enhancement

Source

vaadin-bot

👍10 ❤2

Most helpful comment

Not having minimum/maximum sizes ist quite annoying. Usually it is possible to find some workaround but it is always tricky or you need to change the layout. I encounter this problem on average maybe every 1-2 months. I wonder if it is just me that prefers dynamically sized windows and everyone else prefers a fixed size. Maybe you don't see a high demand for that feature because everyone knows some workaround but is still annoyed.

I hope you can find some time after the 8.1 release to add this. Even if it maybe just some checklist feature.

ssindelar on 6 Apr 2017

👍12

All 26 comments

Originally by @jouni

Why limit the API to pixels only and not allow other fixed units, like centimeters?

vaadin-bot on 12 Dec 2010

Originally by @jojule

Good point, but is there a use-case? Different units make sense for size, but are they really useful for flexible size limits? I am not that sure about it.

On the other hand - supporting different units could complicate the API quite a bit.

vaadin-bot on 13 Dec 2010

Originally by @jouni

Replying to Lehtinen:

but is there a use-case?
The trickiest question ever. Of course someone will come up with a use case, and even if it wouldn't sound logical to us, it might be very important for them. Using ems would be the most simple example: I want to present at minimum three rows of text, but no more than 20, and otherwise have 100% height. And approximating the height using pixels will not suffice because of the varying font size.
On the other hand - supporting different units could complicate the API quite a bit.
I suppose it would be just as complex as supporting different size units currently. The API would be asymmetrical if we wouldn't support all the same units as currently, which IMO would make the API worse.

vaadin-bot on 13 Dec 2010

Originally by @jojule

True enough and the em usecase is relevant.

Still - I do not see how to get the API to get even somewhat compact.

Proposals?

vaadin-bot on 13 Dec 2010

Originally by @Artur-

The way layouting is specified it has to be implemented in the layouts and not in the components. The main reason being that the parent (layout) is the one controlling the layout and has the power to decide what 100% means. The child component then must adhere to that. Otherwise we need to redefine at least how expansion works.

The question then becomes is this a feature of every component or is this a layout feature? From a code perspective it is definitely a layout feature and the API should be provided in the layout, like alignment and expand ratio. Simply adding the API to every component and noting that it only works with certain layouts does not sound very good.

If the API is added to a layout it could be:
layout.setComponentMinWidth("100px")
layout.setComponentMinWidth(100,Units.PIXELS);
to be consistent with the Sizeable API

vaadin-bot on 13 Dec 2010

Originally by @jouni

Replying to Signell:

layout.setComponentMinWidth("100px")
That would be ugly in my opinion, even though it might be consistent from the API point of view. Component alignments are of course a somewhat similar issue, yet they feel more in place than this would.

vaadin-bot on 13 Dec 2010

Originally by @jojule

Artur, you mean:

layout.setComponentMinWidth(childComponent, "100px")
layout.setComponentMinWidth(childComponent, 100,Units.PIXELS);

In any case - how this is different from the case where component says that is 100% wide (layout can give any amount of space for it), undefined (an expanding layout might want to reserve at lest the amount of space used measured from the component) or 10em (handled in the same way as undefined)? Adding min-max support to component directly would just just add these values to component UIDL as minwidth, maxwidth, minheight, maxheight. Layout is then free to use these when calculating expansions.

Say we have a button B and textfied T inside horizontal layout L. L is 100% wide, B is of undefined width, T is 100% wide with no min set and 200px max width. B is at index 0 and T at index 1. T is align left and has expandRatio of 1.0. What happens when window is resized to affect how 100% width of L is calculated - lets call that LW. Button width is measured from offsetWidth - lets call that BW. When LW>=BW, button is fully visible and slot 0 given to button in L is BW wide. If LW200?200:LW-BW.

A more complex example with multiple components with min and max widths and different expand ratios should not be any different. Expand ratios should be used to divide space left after min widths have been taken. If an expanding component gets more than its max value, the extra space should be divided between other expanding components. If there is more extra space to use by the expanding components than max values allow, the extra space should be used in proportion of expanding ratios and alignments used to position components.

As a summary - IMO the min/max values should be attributes to the components - not to layouts surrounding them. Still layouts may use there values from components to provide meaningful expand ratio calculations.

vaadin-bot on 13 Dec 2010

Originally by @jouni

A little more about different units: percentage sizes as max values are very handy, and should not be disregarded.

In any case, I think these enhancements are only feasible for Vaadin 7 and not earlier. And we should probably try to rely on browsers' rendering more than currently, if that's even slightly possible (and it should be, since we're about to drop support for IE6).

vaadin-bot on 13 Dec 2010

Originally by @jojule

Jouni - is there some other case for % max size than having undefined base size?

vaadin-bot on 13 Dec 2010

Originally by @jouni

Replying to Lehtinen:

Jouni - is there some other case for % max size than having undefined base size?
Sure. The normal size, say width, is defined as 800px for example, and the max-width is 100%. The normal size would then in effect be the min-width, but the component would still shrink if the available space becomes too narrow.

Of course the priority of the values needs to be defined so these cases make sense. If the size value takes priority over min/max values, then percentage sizes as min/max make no sense.

vaadin-bot on 13 Dec 2010

Originally by @jojule

Makes sense. Updated the ticket accordingly.

vaadin-bot on 13 Dec 2010

Originally by @Legioth

Instead of forcing each and every Layout and Component to support these features, we could also consider just creating a wrapper component that can be used in that cases where this kind of functionality is required.

vaadin-bot on 1 Aug 2012

Originally by @jouni

Or as a decorator, once we get that feature inplemented.

vaadin-bot on 1 Aug 2012

Originally by _grined_

Is there any news about this feature? When it can be realized?

vaadin-bot on 14 Aug 2013

Originally by _Marcel Hallmann_

Hi there,

is there any news? I think this really would be a nice feature!

vaadin-bot on 8 May 2014

Originally by @jouni

For a limited set of functionality, see the Restrain add-on, which let's you set min/max-width/height from the server. It doesn't do any magic, it just set the corresponding CSS properties on the root element of the component. Expand ratios probably don't always work as expected.

vaadin-bot on 27 Jun 2014

Originally by _maxuss_

Replying to Koivuviita:

For a limited set of functionality, see the Restrain add-on, which let's you set min/max-width/height from the server. It doesn't do any magic, it just set the corresponding CSS properties on the root element of the component. Expand ratios probably don't always work as expected.

I tried Restrain add-on to set min and limit maxHeight of the tree component, but it does not work. Do I need to recompile widgetset or are there any other limitations?

vaadin-bot on 21 Sep 2015

Originally by @jouni

Yeah, you need to recompile the widgetset to make Restrain work.

vaadin-bot on 21 Sep 2015

Wow, I'm surprised that almost 7 years after being opened such a basic feature request, it's still open and undone.

I'm facin a problem with a Window, where I don't want to specify explicit dimensions for it as I'd expect it to grow dynamically to fit its contents. This works well until its contents make the window outgrow the height of the screen. I would expect a vertical scrollbar to automatically appear, but instead the window is cut and you cannot reach its "outgrown" content. The scrollbar only appears if you explicitly set a height, let's say, "90%". But what if the contents of the window only take, let's say, 20% height of the screen? Why do I want my window to have that extra 70% blank space just to be able to scroll in case it outgrows?

There should be a .setMaxHeight() method or whatever.

Pereitor on 24 Feb 2017

👍12

Thanks for the feedback! It is a bit strange, I admit, to not have built-in support for this yet. But we haven’t actually seen a big demand for this, so we’ve prioritized other things.

The use case you describe with the Window is probably the most often requested, and I provided a workaround for that just recently in the Frameowork Gitter chat.

Use this as your window content structure:

.v-csslayout (flex-column) <— window root content layout
   .v-csslayout (scrollable flex-1) <— whatever content
   .v-csslayout (flex-shrink-0) <— footer

Add this CSS to your theme:

.v-window {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 48px);
  overflow: hidden !important;

.v-window .popupContent,
.v-window .v-window-wrap,
.v-window .v-window-contents,
.v-window .v-scrollable {
  display: flex;
  flex-direction: column;
  position: initial;
}

.v-window .v-window-outerheader {
  display: flex;
  flex-shrink: 0;
}

.v-window .v-window-contents {
  flex: 1;
}

.v-window .v-window-contents  > .v-scrollable {
  overflow: hidden;
}

jouni on 28 Feb 2017

😕1

I hope you can find some time after the 8.1 release to add this. Even if it maybe just some checklist feature.

ssindelar on 6 Apr 2017

👍12

This is vital for responsiveness. I have a Panel with a certain width, which I don't want to expand when the screen is wide, but I want it to shrink on mobile devices: I've imported the Bootstrap Grid logic into my theme, but I really think this should be core in Vaadin.

heruan on 27 Apr 2017

👍4

This would be a very useful feature.

zach-herridge on 11 Aug 2017

This is available in Vaadin 10 through someComponent.getElement().getStyle().set("maxWidth", "100px"). There it works out of the box as there are no custom layout implementations but instead the layouts rely on the browser flexbox implementation.

Do you think it is such a common use case that there should be someComponent.setMaxWidth("100px")?

Artur- on 2 Jan 2018

It's nice that it will finally be solved with Vaadin 10. I don't it's so common that it needs a shortcut.
But I would really like to see it also in Vaadin 8 because till the release of Vaadin 10 it will be quite some time. 2019? Also I think the migration from Vaadin 8 to 10 will be a lot harder than 7 to 8. So I think most of us will still be on Vaadin 8 in 2020. So I would be nice to see this feature in Vaadin8 (maybe with full access to the element style like Vaadin 10 :) ), if it isn't to much work.

ssindelar on 2 Jan 2018

👍4

For those who are looking for solutions in the future.
There are 2 solution through CSS which are a bit annoying.

Sets custom theme.
declare min-max class like following.
````css
@mixin mytheme {
@include valo;

.max-size-100 {
max-width: 100px;
max-height: 100px;
}
}
````
Use Component.addStyleNames() method like following.
java new Button("TEST").addStyleName("max-size-100");