Xcode 9 - "Fixed Width Constraints May Cause Clipping" and Other Localization Warnings

Question

I downloaded the new Xcode and in Interface Builder I'm having a ton of problems with warnings that say things like:

Fixed Width Constraints May Cause Clipping

It looks like this:

I do have localization for several languages and I understand the warning that in another language a label's size may change, but my app doesn't have this problem. I ran and tested it in Xcode 8 yesterday, it was fine. I don't want to spend hours and hours adding pointless new constraints.

Any suggested solutions?

Also struggling with this. Getting the error on a button (with no text) that has only a background image which I want set 50x50 — Adam G, Jul 22 '17 at 18:55
Same here. There are buttons that are guaranteed to be 50pt width in all languages. Why sully my otherwise clean autolayout report card with this? — John Scalo, Jul 26 '17 at 17:02
For others, if you DO NOT have any localizations and simply want these warnings to disappear then move your storyboard out of the Base.iproj folder as indicated here: https://stackoverflow.com/a/45040394/1807644 — William T., Sep 25 '17 at 00:10

Shades · Accepted Answer · 2017-08-19T13:43:22.460

198

I was getting the same warnings even without multiple languages in my app, which led me to find out what was really going on. . .

There are a few different things going on here. I was able to silence the fixed-width warnings in my own app by changing the width of the object spacings from fixed width to greater than or equal or less than or equal.

This can be done by selecting the object in interface builder, going to the size inspector and changing it there:

Or, select the constraint from the document outline, go to size inspector, and change it there:

As far as the warning at the top of your screenshot:

Fixed leading and trailing constraints with a center constraint may cause clipping

Here is a screenshot from my own app in which I was getting the exact same warning:

I had the label with the @ sign set to leading and trailing to the buttons but also to align the center with the rating label. Once I removed the center alignment constraint, the warning disappeared, but I was left with an improperly laid out set of objects.

It is then that I resigned myself to embrace the Stack View. As annoying as it is to use, when you get all of the constraints and settings right, it lays out beautifully and with no warnings.

Edit

As Repose writes in the comments, sometimes simply adding >= 0 will be what you need, as you are making sure two elements do not overlap.

edited Aug 19 '17 at 13:43

answered Aug 18 '17 at 22:43

Shades

5,568
7
30
48

2

>= 0 prevents overlapping and fixed overlapping issues I was having earlier, converting Leading/Trailing to Right/Left fixed the clipping error for me. Results may vary. Please consult your physician before beginning any software development. – Repose Aug 18 '17 at 23:12
@Repose Exactly. Think about what may go wrong and add a constraint to make sure it doesn't. – Shades Aug 19 '17 at 13:40
Resigned to use Stack View in iOS maybe is ok, but for OS X (sorry MacOS) it is not always a good choice. Apple should know it. The concept of UI and UX often has different assumptions. – Joannes Oct 17 '17 at 11:14
@Joannes The question has iOS tag – Shades Oct 17 '17 at 12:29
2

I agree with embracing the UIStackView. It has definitely been a pain and I tried to do it with a couple constraints, I added another UIStackView and it laid out perfect. – templeman15 Oct 31 '17 at 18:26
2

Is there any other option - What if I want my control as fixed width? – Kampai Apr 20 '18 at 07:04
1

This response addresses the warning but the frustrating thing is that I want the width of an image view to be set. Why would that cause clipping, especially when I have scale aspect fit? – ScottyBlades Dec 24 '18 at 03:43

Repose · Answer 2 · 2022-10-05T14:42:28.930

66

You can try Disabling "Respect Language Direction" on per Constraint basis to silence the warning and see if it helps. Select your constraint and open Attributes/Size Inspector. Please see image attached.

If you are not planning on localizing your app to other languages, then this solution should not have any drawbacks. For localized apps you have to be more conscious of your label and font sizes.

p.s. This solution works for iOS. For macOS try >= or <= to silence the warning.

p.p.s. Labels in the picture below are much easier to create using AutoLayout and attributedString property on a single UILabel or UITextView using NSMutableAttributedString. The image is for demonstration purposes only.

edited Oct 05 '22 at 14:42

answered Aug 18 '17 at 20:02

Repose

2,157
1
24
26

@Shades Have you tried it for both leading and trailing? They should convert to Right and/or Left – Repose Aug 18 '17 at 22:32
4

If you've tried this and it didn't seem to have any effect, try quitting Xcode and restarting it. That trick worked for me. – T'Pol Sep 30 '17 at 14:39
What is the meaning of Respect language direction? Will it affect to Arabic(RTL) or other languages? – Mihir Oza Oct 31 '17 at 06:27
@mihir-oza yes, in your case adjusting constraints with >= and <= should make more sense. Shades posted an answer that seems to work for him and some other people. – Repose Nov 01 '17 at 07:27
I tried >= but still I am getting the same warning. – Mihir Oza Nov 01 '17 at 07:32
2

It won't let me deselect this. – Scooter Nov 12 '17 at 16:50
it works, but can you explain the potential fallbacks of using this solution? – Adam G Apr 08 '18 at 17:43
@adam-g If you are not planning on localizing your app to other languages, then this solution should not have any fallbacks. For localized apps you have to be more conscious of your label and font sizes. – Repose Apr 08 '18 at 17:49
1

>= constraints had ill effects for me because of various complex priority schemes. I was prepared to insert my Label into a View, but then found your solution that did the trick! Thanks :) – KerCodex Jan 11 '19 at 07:23

score 37 · Answer 3 · edited Jul 15 '19 at 07:38

37

For labels and buttons which are localized this warning makes sense and you should provide the necessary constraints so your labels don't overlap. If they don't overlap now they might in the future, so it won't hurt to provide the constraints.

Xcode helps you add these constraints automatically:

In the document outline of your storyboard click on the yellow arrow and either choose "fixed leading" or "fixed trailing", depending on where the text is on your screen (left or right). This will fix it for most issues.

If you have this issue with a Button without any text (only image), try to remove the "default title" which might still be set for the button:

edited Jul 15 '19 at 07:38

shim

9,289
12
69
108

answered Sep 16 '17 at 14:16

Pascal

1,661
17
29

6

In my case, removing the default title removed the warning. Thanks! – Reinhard Männer Apr 03 '18 at 10:39
Take note that when you add a `UIButton` to `Storyboard`, the `default button` title will be `button`. – Miguel Tepale Jul 19 '20 at 06:24

score 31 · Answer 4 · answered Oct 04 '17 at 03:25

31

With Labels, you can set Lines is 0 and Autoshrink properties is Minimum Font Size to remove Fixed Width Constraints May Cause Clipping warnings, like this:

answered Oct 04 '17 at 03:25

Lionking

570
6
9

3

Yes you only need set lines to 0. – Reefwing Jan 05 '18 at 05:06
2

Settings lines to 0 causes the label to expand to as many lines as needed, which may not be what you want. – nickdnk Apr 02 '18 at 16:14
@nickdnk: i know that, if you fixed height constraint for the label, it won't expand. – Lionking Apr 03 '18 at 01:40

score 24 · Answer 5 · edited Jun 20 '20 at 09:12

24

Another quick solution !

For a UIButton by changing the title from plain to Attributed text also resolved my issue:-

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 25 '18 at 04:59

tryKuldeepTanwar

3,490
2
19
49

score 8 · Answer 6 · answered Jan 18 '18 at 04:50

I know this question has already been answered but what I did to fix this error in my case was to add the "Aspect ratio" property and then eliminate the width or height constraint this worked pretty well and was less effort, and I managed to keep the same output and adapt my view for the different devices.

score 4 · Answer 7 · answered Nov 15 '17 at 10:45

Swift 4 , Xcode 9.1 :

About this issue, I think your object don't know what it's the correct center position in the context of it's superview, and using remove, greater than or other leading/trealing settings most of times don't work correctly. First, you must check the correct constraints of your superview.

If your superview/s are correctly setted, you can try to "explain" to your object what is the correct position in the view by setting the "horizontally in Container" constraint:

score 3 · Answer 8 · answered Apr 08 '19 at 13:48

3

If you need fixed width constraint for button just set width constraint priority to 700.

answered Apr 08 '19 at 13:48

ChikabuZ

10,031
5
63
86

score 1 · Answer 9 · answered Nov 14 '17 at 16:45

I had the same problem, but when I changing to >= it automatically set the constant to 0, if I choose 60 for instance, the warning appears again. So I was in a loop with the problem.

I could fix embedding my Label in a View

Editor > Embed In > View

In Label I set Top, Bottom, Leading and Trailing with constant = 0

In View I set the constraints that I was expecting before.

score 1 · Answer 10 · answered Jan 12 '18 at 21:19

I had the same problem when moving to Xcode 9 and found an approach that's useful for certain kinds of layouts. In my case, I wanted a table header in which two columns (UILabels) were of fixed width and another was of variable width. Regardless of how I specified column widths (including using constraints greater than or equal instead of equal, etc.), I kept getting the warning about possible clipping. In my case, I wanted the variable width column (UILabel) to clip if necessary. I could have just ignored the warning, but don't like doing that.

The approach that worked here was to create a UIView with appropriate size constraints and embed the UILabel as a subview in the UIView. Then truncation happens if necessary and I get no warning. This works whether the UIView/embedded UILabel is in a StackView or not.

This is essentially the same approach as that of Haroldo Gondim but here you can see it also works with or without StackView.

The following image shows the approach, with and without StackView. "SpacerName" is a variable width UIView containing a label and "SpacerPD" is one with a fixed width of 80. [Colors are not significant; just there to show where the views are.]

score 0 · Answer 11 · answered Mar 03 '18 at 23:05

As you can see in the image below, I was having the error "Fixed Width Constraints May Cause Clipping" because although I had set my textbox to be vertically centered and my label to have a left margin constraint, I hadn't defined a constraint for the text box in relation to the label, so XCode was alerting me that the textbox could clip (be rendered above) the label.

After adding the left constraint to the text box to always stay some distance apart from the label the error was considered solved by XCode and it didn't bothered me with the constraint warning anymore.

score 0 · Answer 12 · answered Mar 28 '18 at 03:17

0

I had a similar issue when trying have the button with the same paddings from the edges of the super view.

I've ended up using horizontal center constraint and equal widths constraint to the super view.

answered Mar 28 '18 at 03:17

Pei

11,452
5
41
45

score 0 · Answer 13 · answered Mar 01 '23 at 23:48

I wanted to simply disable these warnings because I'm working on a test app where these kinds of warnings are irrelevant. As described in this answer, XCode places storyboards in the Base.lproj folder by default, and it only checks storyboards for these warnings when they are placed in that folder. The warnings can be eliminated by using Finder to move the offending storyboard from the Base.lproj folder up one directory level to the base project folder, then remove and re-add the storyboard in XCode. This eliminated the warnings for me in XCode 12.5.1.

This solution was mentioned in a comment on this thread, but I'm adding it as an answer because I overlooked the comment previously.

score -1 · Answer 14 · answered Sep 15 '18 at 16:56

To Fix The Error: Fixed Width Constraints May Cause Clipping” and Other Localization You need to select the view/object, go to the "Show Size Inspector", find the Width Constraint and set the Constant to Greater or Equal to:

To Fix The Error: Leading/Trailing constraint is missing which may cause overlapping with other views

This means that the view/object Xcode is complaining about, is missing a Leading or Trailing Constraint to a neighboring view.

While holding control, drag to a near by view/object

Add a Leading or Trailing Constraint

If you click the warning triangle Xcode will automatically create these for you with one click. — lensovet, Mar 26 '19 at 07:06

Xcode 9 - "Fixed Width Constraints May Cause Clipping" and Other Localization Warnings

14 Answers14

Another quick solution !

Swift 4 , Xcode 9.1 :

Linked

Related