Absolute Positioning: Fill Horizontally

Agree, I have a similar case where I want an absolutely positioned component to fill up the background both horisontally and vertically.

Hey folks! Have you considered setting (Top/Left/Bottom/Right) constraints on the Absolute position component? Remember that resizing needs to be “Fixed” for this to work 🙂

Unfortunately this only works if your background isn’t a component of its own. I made a demo file to report the bug earlier today. Here’s hoping this gets fixed soon. 🫣

Ohh good catch. Thanks for the test file – We’ll look into this!

@Oscar_Nilsson For my case that works perfectly. Feeling silly that I didn’t think of that but thanks for the quick response!

This is a long awaited feature but we can’t use due this bug. We’re eagerly waiting to the fix. Thanks.

Hey all! This should be fixed now. Feel free to DM me if you’re still seeing this problem.

I am on the latest Figma version(11.0.5) and my absolute position object still doesn’t have the “filled” option.

I think this is still a problem. I have been working on a large file with a UI with quite a few nested symbols (using the excellent Carbon Design System by IBM). Here is what I noticed that had me pulling my hair out and in the end giving up on the idea to have a fully responsive design/prototype in Figma.

1. Nested symbol instances can (and will) override their resizing. So say you have a bunch of elements, lets say dropdowns, in a vertical Auto layout, like you would in a form on a mobile. In the symbol I would have Auto Layout on the whole frame and then set each child (so each dropdown) to fill the container.
   Now if I place that symbol with the group of dropdowns somewhere I would expect that the children will always remain set to “fill container”. Well, they don’t. A lot of times they will end up set to “fixed”. Even pressing “Reset all changes” on the symbol does not revert the resizing.
   So if you have like 20 instances of that group of dropdowns you will be doing a lot of clicking through to the children and setting them all to “fill container” again.

2. I find it confusing and inconsistent that you can only use fill container in an auto layout, but absolute positioning OUTSIDE an auto layout. @Oscar_Nilsson You mention the “pin to left/right” method, which is great. But couldn’t we just have “fill container” and it does the same thing, it just pins to left and right with 0 margin. It would make it so much easier to just have one thing. Fill container means fill the space of the parent.

It means that to achieve a totally common use case: responsive website with static menu, you have to utilize 2 different mechanisms in Figma.

3. Sometimes Fill container just doesn’t work at all until you go in and toggle the resizing back and forth. Of course that is super annoying when you build large prototypes.

Note in the video how the header is all one component. I have set everything up correctly on the main component. Why do all the instances have different resizing again on child elements? Why can you even override that?

Here is hoping that at some point Auto Layout and resizing just works as flawlessly as expected. I think a good start would be to never revert to “fixed width” unless I select it. I must have reset things to fill container or hug contents hundreds of times now on just that one prototype.

Oh yeah, here is another good one. @Oscar_Nilsson that pin-to-left-and-right trick is not very intuitive if combined with fixed position.

The left-right option is greyed out for fixed elements. But if you toggle it off, then select left-right and then toggle it back on you can have it selected AND greyed out, which makes no sense and is terrible UX. At least it works though. So why have it greyed out in the first place? Why can’t a fixed element be pinned to left and right?

Depressingly enough, not being able to set “Right and left” constraints on Fixed elements has been a well known bug for over 3 years and Figma, I assume, has basically refused to fix it at this point.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.