Text Field Full Width All Orientations All Devices

TravisHTravisH USMember ✭✭

I'm having a hard time getting a simple Text Field to go the max width of my view no matter the device or orientation.

I've tried following this but the screen shots are not the same as what I see.

I've tried Layout -> Horizontal Fill Parent, makes it full width in the editor, but in the simulator its cut in half, other half off the left side of the screen.

I'm simply dragging a Text Field into my view, what next? What steps do I take to make it responsive and go full width?

Using Xamarin Studio 6.1 and my view is part of ViewController. Using the built in Xamarin IOS storyboard editor.

Best Answer

  • JF.0444JF.0444 US ✭✭✭
    edited September 2016 Accepted Answer

    The reason this is happening is because you're missing the left constraint. Right now your constraints are set up to anchor right and top (Note: constraints are value based, so you are not anchoring it flush with right or top unless you set the right and top constraint constants to 0), so in portrait its most likely flying off the left side of the screen because you're constraint wants it to the far left in landscape which is offscreen in portrait. If you drag the left constraint to the left side of the view it will remain on screen although the width will probably be 0 in portrait because the constraints add up to more then the width of the screen.

    For instance if your screen is 500 pixels wide in portrait. You have a text field thats 400 from the right and 100 from the left this will result in a 0 width view that you may or may not see show up. If you want a text box to fill the screen you will need left and right constraints equal to the right and left margins you're looking for.

    image

    You probably want to change the constant on the right constraint to be closer to the edge of the screen. In screen shot below I have a left constraint of 100, right constraint of 50, and top constraint of 50. This can be changed by clicking on the constraint then going to properties, or you can click on text box -> properties -> layout and there will be a list of constraints

    image

    Portrait

    image

    Landscape

    image

Answers

  • JF.0444JF.0444 USMember ✭✭✭
    edited September 2016

    Layout is controlled via constraints. When you drag and drop any ui element on a page like that at run time a height, width, Y position, and X position constraints are formed. If you want that text field to span the width of the device you can double click the text field which puts the element in constraint mode. Drag leading and trailing anchors (represented by rectangles attached to element) to the far sides of the view. This will anchor left and right side of text field to the parent view. You will also need a Y constraint so you can drag the top anchor to the top of the parent view.

    Using this method will fill view in portrait and landscape. Will also auto resize width on rotation.

    This link has some helpful info and some screen shots. https://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/

    Hope this helps!

  • TravisHTravisH USMember ✭✭

    It's just not working... This is what I am doing, and nothing else:

    Step 1 Drag Control to View (see OP screenshot)

    Step 2 Double Click control to bring up constraints mode, anchor top anchor to top, anchor right anchor to right side.

    Step 3 Run in Simulator, no textbox to be found.

    Step 4 Hardware -> Rotate Right , oh there it is...

    Why does it not show up on during normal orientation? But shows up in landscape.

    Why is it not full width of the screen?

    There is something fundamental that I am obviously missing...

  • JF.0444JF.0444 USMember ✭✭✭
    edited September 2016 Accepted Answer

    The reason this is happening is because you're missing the left constraint. Right now your constraints are set up to anchor right and top (Note: constraints are value based, so you are not anchoring it flush with right or top unless you set the right and top constraint constants to 0), so in portrait its most likely flying off the left side of the screen because you're constraint wants it to the far left in landscape which is offscreen in portrait. If you drag the left constraint to the left side of the view it will remain on screen although the width will probably be 0 in portrait because the constraints add up to more then the width of the screen.

    For instance if your screen is 500 pixels wide in portrait. You have a text field thats 400 from the right and 100 from the left this will result in a 0 width view that you may or may not see show up. If you want a text box to fill the screen you will need left and right constraints equal to the right and left margins you're looking for.

    image

    You probably want to change the constant on the right constraint to be closer to the edge of the screen. In screen shot below I have a left constraint of 100, right constraint of 50, and top constraint of 50. This can be changed by clicking on the constraint then going to properties, or you can click on text box -> properties -> layout and there will be a list of constraints

    image

    Portrait

    image

    Landscape

    image

  • TravisHTravisH USMember ✭✭

    Thank you Jason, that worked! And I understand how it works now.

Sign In or Register to comment.