Why did my overall UI size change?

[TokyoDan]

I had things perfectly with my blue backgrounded UI filling the whole 480x720 window. Then something changed and made the whole UI smaller so that there is a white boundary around my blue backgrounded UI. The funny thing is it changed while I was working on another UIPanel. My hierarchy is:

NGUI Camera
--Anchor
----UIPanel1
----UIPanel2
UIpanel1 holds game settings1 and UIPanel2 holds game settings2. I enable/disable UIPanel1/UIPanel2 depending on which settings I want to show.

I was comparing everything to an old project in which the UI background is sized correctly, and the only difference I could find was the size of a purple box that shows when I select one of the UIPanels in the editor. In the old project the size is H=504, w=336. But in the new 'broken' project the size is H=680, w=725.

1. Why would the size of this purple box change when I didn't change it directly?
2. How can I change it back to the correct size? (I can drag the handles on the corners or sides).
3. What does the purple box represent?

Note: This kinds of weird 'automatic' changes often happen without any direct size manipulation on my part and I don't know why.

[ArenMook]

First, get rid of the "Anchor". There is no reason to have that legacy component there.

Next check the camera. it must have Orthographic size of 1.

After that check the size of your game window. If your game window is not constrained to a specific size, which the difference in screen size would seem to suggest, then you will obviously see more or less on the sides.

Lastly, check the setting of your UIRoot. Leave it at Fixed Size if you want it to be catered to a specific screen size.

[TokyoDan]

Thanks. Before this problem started my camera size was 1.35 and that setting ran perfectly sized in all builds: Web, Mac, iPad retina and non-retina, iPhone retina and non-retina.

Anyway I followed all of your advice in your rsponce and that makes the size OK in the editor, and in Mac, and Web builds. but on my iPad Retina, everything is so oversized that most of it is off screen. I haven't tried it on iPhone nor non-retina iOS devices.

Also I have been using multi-resolution aliases and resolution switching that I setup from watching and reading your tutorials and that all worked fine.

But if you could please answer my three questions about the blue boundary box and why the size could have changed (and how to change it back) I think I may be able to fine the cause of my troubles.

[TokyoDan]

I found where to change the size of that blue bounding box. In the UIRoot script in Manual Height.

(And since I am using resolution switching I got that set to FixedSizeOnMobiles.)

BUT…

Manual Height has always been 480 and it's been good up till last night. But now in order to get the size of that blue bounding box back to optimal size I had to change Manual Height to 650.
Why would the visual representation of that blue bounding box change (with no change to the Manual Height value) in relation to size of my UI layout?

NOTE: You told me to delete Anchor as it is a legacy component. But in your latest NGUI examples I looked at the Toggle example and it has an Anchor component.

[ArenMook]

Not all examples have been updated. I need to get through them at some point. The center anchor doesn't have any effect anymore, which is why it's not needed. It used to apply a half-pixel offset in the past.

FixedSizeOnMobile means the UIRoot will behave as if it was Pixel Perfect on desktop and editor, and Fixed Size on mobiles.