Retrieve Widget's Computed Rect Inside Grid?

Community Usage questions
1

I'm using some functions to help determine label/icon sizes. I pass through the height/width of the widget using a global function that for example returns my label size based on those.

font-size: #{globals.setLabelSize(@{this.height}, @{this.width})};

globals.setLabelSize = (h, w = h) => {
  if (globals.screen.width <= 1400) {
    return ((parseFloat(h) + parseFloat(w))/2) * 1.25 + "rem"
  }
  return ((parseFloat(h) + parseFloat(w))/2) * 2 + "rem"
}

This works. However, if a widget is in a grid, the result of @{this.height or @{this.width} is calculated from the parent container (grid). So, if I have 4 buttons in a grid, one button's height would roughly be around ~25%. In reality, the computed height is roughly 100ish px in my example below accordingly to the dev tools. Here is the picture below, the two purple buttons are showing the @{this.height}. The left is the grid, and the right is the same size outside the div and the difference is drastic which makes sense.

image

I'm just wondering if it's possible to actually grab the computed height somehow instead so I can work with my global function still?

Cheers,
DMDComposer

2

Hi Dillon,

I think it's not possible to track the child size of a grid, unless you specify it using template-rows/columns.

But, in your case, maybe it's easier to use only CSS to find the best font size based on screen size.
CSS has functions like clamp() - CSS: Cascading Style Sheets | MDN, where you define min, ideal and max size of an attribute.
Also, you can use units like vh and vw that gets the viewport size in both directions.
And all of them can be combined with calc(), even mixing units CSS values and units - Learn web development | MDN.

Cheers

1 Like
3

I'll start messing with Clamp more. I was trying to find a smarter way and deal with the responsive sizes on a macro level which would result in fewer css lines on each individual button. Nonetheless, using clamp to deal with the responsive sizing on each individual element will work, and is the best choice I can see at the moment.

Thank you!

Cheers,
Dillon

1 Like