Skip to main content
Question

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


Deepak_Madhana_Raj_Kannan

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.

https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp

This topic has been closed for comments

4 replies

Klesus
  • 237 replies
  • May 22, 2022

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


Deepak_Madhana_Raj_Kannan

Hi! Klesus

https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp

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.


Klesus
  • 237 replies
  • May 22, 2022

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?


  • 0 replies
  • June 21, 2022

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings