Why is my Toolbar getting chopped off in compact s

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:

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! :)