I created this form field. I want the field length to be adjustable, while keeping the button the same size and at the end. However, when I resize the field, one of two things will happen:
Button stays the same size, but doesn’t move to be at the end of the field.
Button moves, but changes size.
How should the component be set so that the button has a fixed size but dynamic position?
There are plenty of ways to do it.
If your button layout is using the autolayout, set the button component’s height and width to hug,
then on your textfield component, if you’re using autolayout just put the Input container’s width into fill
the entire textfield component is also in autolayout with this structure:
that should do it.
Set the Standard Form Field to fill.
Another option is to remove the autolayout on your component and then set the constraints of the button to right and the standard form field to left. Normally, I don’t put texts on hug so that it’ll automatically adjust it’s height.
I want the button to be set so that if the label is updated, it expands away from the field as shown above. But with the button set to right, it expands into the field.
The button only expands away from the field if it’s set to left, but then it won’t move when the field is being resized. Is there a way for the text and button to have like opposite constraints?
Well, you can’t do that if you set the component width into fixed.
What currently happens to your button component is that it’s trying to occupy the spaces available on the parent/main container (Component).
So, if you want to your button to be expanding on the right, you need to:
The issue is that the textfield (you named it Field Label) would remain fixed so it won’t increase size anymore. You can also set it into hug but add a min width or max width so it doesn’t look to short nor big. And putting it in Fill won’t work since we need your main component in hug. And your textfield size would depend on the width of your button and the textfield container.
edit:
sorry, I realized you changed your layout into the default which uses constraints. Since we set the button to right, it won’t really expand on the right since the point where it would expand would start at the right. And if you changed it to left where it would expand to right, once you resized your component, the button would be fixed on the left which is not what you initially wanted at first. For this, I think you need to understand first about some limitations, because although that is somehow possible on code, that’s not the standard way of doing it. We can’t really do something like that, where we calculate the width of the button and add it to the parent container so it’ll expand rightwards (because the parent container is set into fixed)
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
