Size Expressions

OGX.JS provides a way to work with sizes using a size expression, in a responsive environment. All calculations happen through the static method OGX.Data.getBestSize

Here are a bunch of size expressions

 const exp = '200|300px|60%+';
 const exp = '400|50%-';
 const exp = '400[200,600]';
 const exp = '100px|400px|60%+[100,400]';
 const exp = '150|300px|400|70%-[=100]

The piping indicates the framework to select the best size for an element, considering its parent width.

The expression 200|300px|60%+ means, the width should be 200px or 300px or 60% of its parent, pick whatever is the largest, via the + sign, that still fits inside the parent.

If you'd rather get the smallest size, use the - sign instead.

You can also set limits, such as [100,400], meaning bigger than 100px and smaller than 400px. In this case, getBestSize would return a size in the expression that does not violate the limits. For instance, the expression 150,50%+[100,600] would return either 150px or 50% considering the limits > 100px and < 600px.

You can also set hard limits, such as [=100,=400], in which case, the returned value would not be 150px or 50% but instead 100px or 400px depending on if the calculated size (150px or 50%) exceeded the hard limits. This is mostly used in percentage calculations.

Finally, if only one limit is set, such as [100], it is considered the min limit.