Why is my Toolbar getting chopped off in compact size?

Question

As can be seen below, my toolbar gets chopped off in the compact size:

My UI consists of a ToolBar and a WebView. The constraints I tried don't work, although I did get them to turn blue. As you can see, my toolbar is pinned to the top, the left side, and the right side (I also set a constant height).

How can I get my toolbar to display correctly in the compact size.

Thanks.

Edit1:

Edit2:

Here is what I did to get things to display correctly:

1. I had to drag the edges of the WebView all the way to the edge of the (universal) storyboard in order for web pages to display without getting chopped off.

2. I pinned (Editor>Pin) the ToolBar's leading edge, trailing edge, and top edge to the Superview. I also Ctrl+dragged vertically on a gray part of the ToolBar to set a constant Height.

3. I pinned (Editor>Pin) the WebView's leading edge, trailing edge, and bottom edge to the Superview.

4. I Ctrl+dragged vertically from the WebView to the ToolBar and selected Vertical Spacing to make the spacing between them(which is none) constant.

5. I added the code at the link to the other answer to make the UITextField stretch or shrink to fit the available space. Note that Preview cannot see the code, so you have to actually Run your app to see that the UITextField does in fact shrink and expand to the size of the device.

Here's a screen shot:

Undirected

Can you please add some details about the constraint (from the inspector)? – Uniformed

@BrunoBelotti, Ah, sorry! I didn't know there was such a thing. I'd also like to get the Textfield to stretch out in the regular size. – Undirected

@BrunoBelotti, I just noticed, and you can see it in the first image in the Preview on the right, there is more than one WebView (and there was also more than one Toolbar). I deleted everything and started over, but I still have the same problem. The second image is from the cleaned up UI, where there is only one Toolbar and one WebView. – Undirected

mmmm... it looks fine to me, I tried the same constraints, and they are working. Try resetting everything again, using only the toolbar (sometimes you inadvertently tie one component to another, like the webview below). – Uniformed

I think the toolbar is set properly, but the items inside of it are not: try setting the constraint of the textfield and the buttons. I mean: the toolbar does expand properly, but the textfield inside it and the buttons have fixed size, so they doesn't (you can, for example, insert a Fixed\Flexible Space Bar Button Item) – Uniformed

@BrunoBelotti, All the constraints are grayed out for the UITextField. I found this answer: #22904027, but it doesn't work for me--after declaring an outlet for the UITextField in the ViewController, hooking it up in IB, then adding the code, I still see the same thing: the toolbar is chopped off in the compact size, and not wide enough in the regular size. – Undirected

@BrunoBelotti, Ahah! The answer I linked does work...it's just that Preview cannot see that code. Apparently, Preview just shows you what you did in IB. When I run my code against an iPhone6, then run my code against an iPad(click on the device in the jump bar to the right of the stop button, and choose another device), the TextField stretches to fill the available space--including when rotating both devices. – Undirected

@BrunoBelotti, Can you make a small edit to your post? – Undirected

sorry, what? I don't understand what you're asking: of course I can make a small edit, but to which purpose? – Uniformed

Answer 1

Ok, I did a few tests and I noticed that your Toolbar is actually resizing properly (in fact you can see the grey background underneath).

I think the problem are the items inside of the Toolbar, the TextField and the BarButtons: they have fixed sizes, so when you change your view, it looks like the Toolbar is chopped (but, in fact, the items inside it are clipped).

So, if I'm not wrong, your constraints are spot on, but you want to take a look at this question\answers here on SO

Let me know! :)

Uniformed