6

I'm attempting to have two buttons side by side that look correct across all devices but no matter what constraints I seem to add in I keep getting issues similar to this (one button larger then the other):

enter image description here

Any ideas what I'm doing wrong as far as adding in constraints? I'm not using code for this simply doing it through the InterfaceBuilder in Storyboard.

Constraints set:

Reply: Leading Space, Bottom Space, Height Equals :45, Trailing to Delete Button

Delete: Trailing Space, Bottom Space, 32:9 Ratio, Height Equals :45, Leading to Reply Btn

iamVishal16
  • 1,780
  • 18
  • 40
James
  • 201
  • 4
  • 13

3 Answers3

13

With both buttons selected, go to Editor > Pin > Widths Equally. Then set the height, leading/trailing space, space between the buttons, and bottom space.

Morgan Chen
  • 1,137
  • 7
  • 18
3

According to me add following constraints

  • Select Reply button adds leading space and bottom space to superview
  • Add center Y constraints to delete button
  • Then align top and bottom space to delete button and also add trailing space to delete button
  • After this select delete button add bottom space and trailing space.

I had similar operations on one of my view, please see this picture for more infoReply Button

Happy Codding :)

iamVishal16
  • 1,780
  • 18
  • 40
2

You need to add a constraint for equal widths, and also remove the '32:9 ratio' constraint, which is currently setting a width for the "Delete" button w/o having a set width for the "Reply" button. That's what's causing the issue.

If you then still have the leading & trailing edges pinned to their respective sides of the container view, and set the space between them to zero, then you should be good.

mc01
  • 3,750
  • 19
  • 24