How do you make a widget resize to the height of its content in a responsive design?
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?
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.
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.
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?"
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?"
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
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
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.
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.
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.
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.
Replies have been locked on this page!