Auto layout. Trying to create android or google style Input textfield

Auto layout.

I am Trying to create android or google style Input textfield.

  1. I converted text into Auto layout and gave background fill as white > converted to component and created text property

  2. I created a second variant, reduced the horizontal and vertical padding and created another rectangle background fill and moved the auto layout label text.

The problem is in the second variant the label text, with auto layout, moves to the right when the label text is long and overflows. I want the text to move to the right, not from the center.

I have attached the screenshot.

I am trying to build like Gmail registration text field/Input box interaction. When you click on the placeholder text, it moves to the top.

I’m not entirely sure what your issue is but I’m guessing you haven’t checked your text-alignment settings.

Hi! Klesus

I am creating interaction like the above google registration form. The placeholder becomes the label while the user clicks on the text field.

As you said I have the alignment has left for the label.

The problem is, I have converted text(left aligned) into label for the text field using auto layout.

When label text for the textfield is too long the auto layout “hug”, fixed", “fill” is not working.
it pushes the test outside or it overflows.

In your first screenshot the left sidebar shows your assets, that ain’t useful when giving support. Could you please post a screenshot of your layers, and possibly the settings for each layer in the troubling variant?

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