AutoLayout complains about constraints for 2 UITextFields with no borders

Question

I am trying to build my login view that has only 2 TextFields, and 2 buttons. I am applying the "Add Missing Constraints" property so that Xcode applies the corresponding constraints to all the elements in my LoginViewController in the storyboard. I am restricting my app to run only in portrait mode, so I am using the "wCompact hRegular" setup.

Whenever I run my app and transition to my LoginViewController with a segue, my app displays only one textfield, and shows a bunch of errors in the console regarding autolayout.

The functionality I am trying to achieve is to come up with a login screen that resembles the new Parse login screen. That is having two textfields with no borders and only the bottom border of the username textfield showing so it can divide it from the password textfield, like so:

So far, this is how my app looks when it runs:

And it should look like this:

Here's the error that appears in the console:

2015-06-14 20:40:21.480 MyApp[71158:3600335] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<_UILayoutSupportConstraint:0x7f9ff3f6d260 V:[_UILayoutGuide:0x7f9ff3f7a140(20)]>",
    "<_UILayoutSupportConstraint:0x7f9ff3f087a0 V:|-(0)-[_UILayoutGuide:0x7f9ff3f7a140]   (Names: '|':UIView:0x7f9ff3f7a030 )>",
    "<_UILayoutSupportConstraint:0x7f9ff3f24730 V:[_UILayoutGuide:0x7f9ff3f7a2a0(0)]>",
    "<_UILayoutSupportConstraint:0x7f9ff3f71640 _UILayoutGuide:0x7f9ff3f7a2a0.bottom == UIView:0x7f9ff3f7a030.bottom>",
    "<NSLayoutConstraint:0x7f9ff3f6b9e0 V:[UITextField:0x7f9ff3f782a0]-(NSSpace(8))-[UITextField:0x7f9ff3f7a3d0]>",
    "<NSLayoutConstraint:0x7f9ff3f58a40 V:[UIButton:0x7f9ff3f7ab00'Login']-(331)-[_UILayoutGuide:0x7f9ff3f7a2a0]>",
    "<NSLayoutConstraint:0x7f9ff3f28b60 V:[_UILayoutGuide:0x7f9ff3f7a140]-(237)-[UITextField:0x7f9ff3f782a0]>",
    "<NSLayoutConstraint:0x7f9ff3f34180 V:[UIButton:0x7f9ff3f7ad20'I forgot my password']-(49)-[UIButton:0x7f9ff3f7ab00'Login']>",
    "<NSLayoutConstraint:0x7f9ff3f341d0 V:[UITextField:0x7f9ff3f7a3d0]-(35)-[UIButton:0x7f9ff3f7ad20'I forgot my password']>",
    "<NSLayoutConstraint:0x7f9ff3f29f90 V:[UITextField:0x7f9ff3f782a0(30)]>",
    "<NSLayoutConstraint:0x7f9ff3f055a0 V:[UIButton:0x7f9ff3f7ad20'I forgot my password'(30)]>",
    "<NSLayoutConstraint:0x7f9ff3f055f0 V:[UIButton:0x7f9ff3f7ab00'Login'(30)]>",
    "<NSLayoutConstraint:0x7f9ff3cc3b80 'UIView-Encapsulated-Layout-Height' V:[UIView:0x7f9ff3f7a030(667)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7f9ff3f055f0 V:[UIButton:0x7f9ff3f7ab00'Login'(30)]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

Does anyone know how to fix this and why it does not work? I even tried manually adding all the constraints manually, but it did not work. Also, if I give my textfields rounded borders and make them a little smaller than the storyboard's full width, it does what it's expected to do.

Thank you for you help in advance.

Cheers!

Answer 1

"Add Missing Constraints" is not always a good idea to add constraints..rather you should always prefer to add constraints manually...

Here is the image for your UI...I used wAnyhAny layout as it is good practice for add constraints for universal devices...

I used simply width constraint for textfield, rather you should Equal width to super view and add multiplier to resize width according to device width

Here is the output image in different sizes...