Inheriting width or height from a parent using "auto" or %

Community Usage questions
1

Inheriting width or height from a parent that is set to "auto" or a percentage value just returns "auto" or the percentage (ie. 100%), which prevents doing any sort of math based on those values.

For example, if I have the root or a container set to "auto" width, and want a widget inside of it to take up half of that width #{ @{parent.width} / 2 }, all I get is "null", because you obviously can't divide a string by an integer. Similar behavior occurs with percentages...

Am I approaching things wrong, or is this possibly a bug? I would normally expect "auto" or a percentage to get evaluated to a numeric value before being passed...

2

Ahhh, I was able to make #{parseInt(@{parent.width}) / 2}% work

1 Like
3

In general I think it's better to use vertical/horizontal/grid layout on containers as much as possible to avoid reinventing the wheel. With vertical/hozontal mode, children widgets with expand set to true will expand and share all the room that's not taken by widgets with expand set to false (whose size may be expressed in percent if needed). Combining vertical and horizontal with a mix of expanded and fixed-size children is a good way to create responsive interfaces.