How do you make a widget resize to the height of its content in a responsive design?

Amlynn shared this question 2 years ago
Answered

I'm new to JIM and I'm creating a responsive pattern library. I figured out how to make the width of a widget respond based on the browser size, but I'd like to make the height resize based on the content inside of it. "Relative to parent" seems to be relative to the entire page (not the widget itself) and I can't figure out a good way to calculate it. Any thoughts?

Best Answer
photo

You can use percentage-based width to do this. Select the element you would like to be responsive, and then look to the Properties palette. Look to the 'size' section, and then to width. Click on the 'px' dropdown and change it to '%'. Then, in the width input, type 100. Now, the width of this element will always be 100% of the screen.

df9fe30f3831fa3deb5b1216fd465b12

Comments (4)

photo
1

For example, you can resize a rectangle widget to be a percentage of the screen. If I have text inside of that widget, it wraps inside the widget when it resizes but the height doesn't change when the text wraps.


Is there a way to say, "make the widget resize to the height of the content inside of it?"

photo
1

Hi there,


Check out the 'calculated' option for resizing the height. The condition will be the Height of the text inside the rectangle. Note that the rectangle will collapse upward, so if the text is centered, the rectangle will not contain the text. To avoid this, have the text be at the top of the rectangle.


Hope this helps.


Best,


Danielle

photo
1

I'm trying the same thing with an ellipse, instead of a rectangle.

Is this possible? Text value varies because it'll show upon's a data master text field.

photo
1

You can use percentage-based width to do this. Select the element you would like to be responsive, and then look to the Properties palette. Look to the 'size' section, and then to width. Click on the 'px' dropdown and change it to '%'. Then, in the width input, type 100. Now, the width of this element will always be 100% of the screen.

df9fe30f3831fa3deb5b1216fd465b12