Problems with resizing in nested auto layouts

Ask the community
1

Hello community,

I spent hours solving the following resizing problem, but couldn’t find the proper way:
I have this panel:
john-doe

The panel is nested like this:
nested-panel

I can’t manage to get the green stripe at the left side to resize based on the content-area on the right side:
john-doe-resized

My settings are (from outer to inner layers):

  1. Statustableau:
  • Type: Frame
  • width: fixed
  • height: hug
  • Auto layout: vertical, align: top left
  • constraints: left, top
  1. John Doe
  • Type: group
  • width: fill
  • height: fixed
  1. (inside John Doe layer)
    a) Status indicator (the green rectangle)
  • width & height: absolute values

b) Content-Area

  • Type: frame
  • width: fixed
  • height: hug
  • auto-layout: vertical, align left center
  • constraints: left, top
  1. In the content area is the star icon, the texts and the tags, but they shouldn’t matter.

Basically my problem is:
if I make the “John Doe” group a frame with auto layout, I can set the green rectangle’s height to fill, but then if I resize the width of the outer “Statustableau” layer, the content-area isn’t resizing anymore, as its width and height get’s changed to “fixed” and I can’t chose fill and also the content-area’s width cant be set to fill anymore, too.

Can anyone give me hint, what I’m missing?

2

Can you share a file here, so we can copy it and sort the fix for you?

3

Easiest solution is to give the frame (don’t use groups) a green border left, add sufficient border radius.

Also, don’t resize. Built another variable for the device you need.

1 Like
4

Wow, sometimes you don’t think of the simplest things. The way through a left border is excellent. Thank you!

1 Like