Skip to main content
Adriano
Adriano
Jan 20, 2023 1:17 AM UTC
Question

Nested element cannot be resized

I have a component that includes a list made with Autolayout.
I need some of those items to have different heights.
When I use the component in my design I cannot specify the size of the list items, they can only be Hug or Fill, and when I choose Fixed the size input field is greyed out.

If I choose Fill on the list items they will change their size based on the container, so I could resize them by adjusting the size of the parent. But that will make all of them the same height. I need them to be in different sizes.

How can I make each list item in a different size?

    This topic has been closed for replies.

    6 replies

    Gleb
    Gleb
    Power Member
    Jan 20, 2023 2:20 AM UTC

    You can’t modify the size of items inside a component instance. So a solution would be to not use a component instance here.

    Adriano
    AdrianoAuthor
    Jan 20, 2023 4:20 AM UTC

    I see.

    It would be fantastic to be able to override the element size when inside another component.

    I’m designing a table, and I have components for each Column. I have different Cell Components I can switch to change content. And sometimes the content of the cell is big enough that they become higher, so I will have to change other cells which might not have the same content so I can’t use Hug in there, I have to use an arbitrary height.

      tank666
      tank666
      Jan 20, 2023 9:34 AM UTC

      So you’ve taken the wrong approach. Instead of a column component, you need a row component.

      UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
      Adriano
      AdrianoAuthor
      Jan 22, 2023 9:27 PM UTC

      I think the problem is that I have “an accordion inside an accordion”. So regardless of how the table is composed, I won’t be able to resize a component nested inside another.

      I wish there was a way to assign an arbitrary size for elements inside a component.

        Olivier15
        Olivier15
        New Participant
        May 10, 2024 1:12 PM UTC

        This is still an issue… (Especially necessary for table components, either if you use row or column components)

          Dustin_Hansen2
          Dustin_Hansen2
          Active Member
          Oct 31, 2024 4:07 PM UTC

          It is very odd. You can switch from Fixed to Hug or Fill. But you can’t modify the fixed size. It doesn’t make sense to me.

            Terms & ConditionsAccessibility statement