I can’t seem to get this input component to resize when I add the floating label to the component.
Solved
Need help to make input resize with floating label
Best answer by AlicePackard
Hey Nathan, you were already really close with this! The fix I came up with in your file only required a few steps:
- Add auto layout to the “Input” component
- Use absolute positioning on “Frame 2” (the input’s label) to manually position it
- Set the nested “input” frame to fill horizontally
Here’s a GIF of the result:
Here’s view-access to the Figma file I used to take these screenshots and GIFs, in case you’d like to have a closer look at the layers and auto layout settings.
This topic has been closed for comments
Hey Nathan, you were already really close with this! The fix I came up with in your file only required a few steps:
- Add auto layout to the “Input” component
- Use absolute positioning on “Frame 2” (the input’s label) to manually position it
- Set the nested “input” frame to fill horizontally
Here’s a GIF of the result:
Here’s view-access to the Figma file I used to take these screenshots and GIFs, in case you’d like to have a closer look at the layers and auto layout settings.
1 person likes this
Thanks so much!
You’re quite welcome! I’d like to thank you as well 🙏 it’s been over a year since I last did any work with floating label inputs, and your post reminded me I had published a community file a while back where I used a super convoluted auto-layout set up to eliminate the need to have any color fill behind the label (which would be “invisible” so long as it matched the input fill and the background). It worked, but it was complicated and weird 😕
But now that Figma allows us to isolate strokes on frames and gives us absolute positioning I figured I’d revisit it! Pleased that I was able to reduce the layer count from 19 layers to 9, and also simplify the layer structure (it should be much easier to re-style). Check it out!
Your set up looks pretty clean and strong, just wanted to link to this file in case you were interested in an alternate set up. Thanks for starting this thread!
1 person likes this
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.