Fill Container Option/Setting

When setting the width or height there should a “Fill” option to allow users to easily set the width or height to the space available in the parent container. This helps prevent wasting time adjusting widths or overshooting the size of the container. It also allows for easy responsiveness for web dev design.

Hey Kevin!

Thanks for the suggestion and the feedback!

Even though we do not have a Fill option just now, you can:

  • Select the shape you want to make 100% of the width of its container
  • In the inspector, click and focus the Width field
  • Write 100%

The shape will now become 100% of the width available to it! :+1:

1 Like

I just wanted to post that feature request :slight_smile:
It would save so much trouble and make the symbols more universal (without the need to create multiple for each case).

For example when we have a input with an icon next to it
[ input field_______] [icon]
when we get rid of the icon (change symbol to none) the text field should fill the remaining space.
[ input field____________]
now it keeps the default width :frowning:

1 Like

I feel the pain there too. I have the same issue and while having groups have smart layout helps it still requires editing, modifying, and adjusting after the components or groups are changed.

2 Likes

Hi @srkkrs and @Keviruchis: if you add min-width to the parent symbol you can make the text field to take the full width when you hide the icon!

Take a look at this video:

fullwidth-textField

And here’s the Sketch document too!

Let us know what you think! :raised_hands: :smiley:
fill container setup.sketch (216.3 KB)

2 Likes

@dfmedrano wow! It’s not intuitive at all, but it works! :smiley:
Thank you :slight_smile:

1 Like

Hey @srkkrs, I’m happy to see it was useful! Let us know if you have any other scenarios or use cases you want us to take a look at :raised_hands:

@dfmedrano In fact I do have. I’ve check it yesterday and your solution works fine with simple structure components, but if there are two groups with smart layout next to each other, then it won’t work (or I don’t know how to achieve it).

One group (left side) should fill in the space, while the other (right side) shrinks or expands.

Hey @srkkrs can you share a sample file that shows the structure of your layers? I did a quick test with two Smart Layout groups and it worked as expected, but surely I’m missing something. Thanks in advance! Each group has Smart Layout as well, take a look below

two-columns

I just wanted to post that feature request :slight_smile:
It would save so much trouble and make the symbols more universal (without the need to create multiple for each case).

fethiye tours

Hi @mikifare, welcome to the Forum!

I agree on what you mention. However, there is a lot of nuance when it comes to creating symbols. Can you share with us some details of your use case? Maybe we can find a solution or discover a new scenario to consider.

Thanks in advance!

1 Like