Container View getting pushed down as if it had a UINavigationBar?

Question

I have a UIViewController with a Container View. This Container View contains a UITableViewController.

The UIViewController is embedded in a UINavigationController. I configure the NavigationBar by changing the tint color, the bar tint color and the title text attributes, but when I try to change the translucency I have a problem. I've singled out the problem by removing all the other customization code. Whenever I do this in UIViewController's -viewDidLoad:

self.navigationController.navigationBar.translucent = NO;

the Container View adds some space on top of itself, as if it had it's own navigation bar. Whenever I set translucent to YES the view displays everything correctly. This only happens on a contained view whenever I set translucent to NO.

Is there something that I'm missing here?

I tried setting the translucency to YES on the contained view and also setting it to hidden, but nothing worked. Is somehow, the contained view inheriting properties from the parent's container? How do I avoid this extra space created on the contained view whenever I set the translucency to NO?

I would expect that setting the translucency only affects the translucency, but not the position of the views.

When translucent = YES

+---------------------------------+
|                                 |
|     UINavigationBar             |
|                                 |
+---------------------------------+
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|    UITableViewController        |
|    in a Contained View          |
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
+---------------------------------+

when translucent = NO

+---------------------------------+
|                                 |
|     UINavigationBar             |
|                                 |
+---------------------------------+
|                                 |
|blank space created on top of view
|                                 |
+---------------------------------+
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|     UITableViewController       |
|     in a Contained View         |
|                                 |
+---------------------------------+

P.S. My View is more complex than this, I'm simplyfying.

Is the view getting pushed down inside a scroll view? If so, set `self.automaticallyAdjustsScrollViewInsets = NO;` on the main view controller.m Actually, yeah, it's a TVC so you will need this. — Fogmeister, Sep 19 '13 at 08:59
@Fogmeister saved me in 2020 ...your comment is going to be a timeless legend — amar, Sep 30 '20 at 19:51

score 35 · Accepted Answer · answered Sep 19 '13 at 09:13

35

What you are missing here is that a translucent navigation bar sits on top of your viewcontroller's view, while a non-translucent navigation bar pushes down your view controller's view (effectively resizing it).

So what is happening here is that with a translucent navigation bar, that white space is actually hidden underneath the bar, while when the bar is not translucent it's "pushed down".

There are a number of ways to go about it, and it mainly depends on whether you're using auto layout or not.

answered Sep 19 '13 at 09:13

micantox

5,446
2
23
27

I am using auto layout. How should I go about it? – Eric Sep 19 '13 at 09:31
7

It depends on your detailed implementation, but i would say that the easiest way to go is to only use the following constraints for your container view: leading space to superview, bottom space to superview and height. This way you will anchor the view to the bottom left rather than the (default) top left – micantox Sep 19 '13 at 09:42
What about the non-Auto Layout case? – Aodh Oct 08 '14 at 16:30
@Fogmeister 's comment on the question worked for me – C0D3 May 31 '16 at 17:59
The fix is `self.navigationController.automaticallyAdjustsScrollViewInsets = false`. Reason is that navigationcontroller adds an extra content inset to the scroll view, making tableview visible under a transparent navigation bar. Check this for more infos: https://useyourloaf.com/blog/extra-space-when-embedding-table-views/ – Yongxiang Ruan Jun 26 '17 at 16:29

score 25 · Answer 2 · edited Feb 21 '18 at 04:20

25

I fixed this issue by adding this line of code in -viewDidLoad:

self.extendedLayoutIncludesOpaqueBars = YES;

edited Feb 21 '18 at 04:20

Pang

9,564
146
81
122

answered Nov 17 '16 at 10:59

qianling

251
3
3

Rainer Schwarze · Answer 3 · 2015-12-04T21:43:36.583

If this issue occurs with a storyboard (without touching the translucent property in the code), I found it helpful to check the NavigationBar settings and - if necessary - the storyboard source file.

(This does not fully apply to this question, but when I searched for the issue, basically only this question popped up and maybe the information helps others with the same issue.)

The details:

To access the Navigation Bar in the storyboard editor: Show the Document Outline (menu Editor -> Show Document Outline), select the Navigation Bar.

Navigation Bar in Document Outline

Then in the Utilities Pane on the right hand side in the Attributes inspector make sure, "Translucent" is unchecked.

Translucent Propterty

If this does not help, open the storyboard file in TextEdit, look for the navigationBar element and check for opaque or translucent attributes. You want translucent="NO".

StoryBoard Source

(To open the storyboard source: In Xcode in project navigator right click on the storyboard file. Select "Show in Finder" and in the Finder window, right click on the file and select "Open with..." and select TextEdit.)

EDIT: (I don't know, whether it was there all the time, but one can right click on the storyboard file in the project navigator and select "Open As" -> "Source Code". No need to go to the Finder.)

Spent more than 2 weeks looking for a fix to this. You're amazing. — Zane Helton, Feb 17 '15 at 02:30
For those who want to preserve the light gray bar color event after making it translucent, just change the bar tint to #f9f9f9 — Mofe Ejegi, Dec 22 '17 at 17:57

score 3 · Answer 4 · answered Apr 12 '16 at 05:45

3

I fixed this issue by going into IB > Select the view > Deselect "Adjust scroll bar insets"

answered Apr 12 '16 at 05:45

Phil Hudson

3,819
8
35
59

Just wanted to add that I had to deselect it in the View Controller containing the Table View and leave it selected in the Navigation Controller – LuisCien Jul 20 '16 at 01:20

score 3 · Answer 5 · answered Feb 21 '18 at 04:04

The above mentioned in the above answers did'nt work for me.When translucent is NO my ViewController pushes downwards which is embeded in Navigation controller. The solution worked for me is shown below

Go to Attributes Inspector
Select 'Extend Edges' by ticking the checkbox titled Under Opaque Bar

The screenshot is atatched

I am using Xcode 9.

Thanks

score 1 · Answer 6 · answered Sep 25 '17 at 15:11

As of iOS 7.0, all views automatically go behind navigation bars, toolbars and tab bars to provide what Apple calls "context" – having some idea of what's underneath the UI (albeit blurred out with a frosted glass effect) gives users an idea of what else is just off screen.

If this is getting in your way (and honestly it does get in the way surprisingly often) you can easily disable it for a given view controller by modifying its edgesForExtendedLayout property.

For example, if you don't want a view controller to go behind any bars, use this:

edgesForExtendedLayout = []

Available from iOS 7.0

Source

score 0 · Answer 7 · answered Jul 20 '17 at 06:03

0

This is purely because of your auto layout issues, may be u are hiding some views on the starting, just show all the views and check whether the space is still there

answered Jul 20 '17 at 06:03

SHINTO JOSEPH

377
4
17

score -4 · Answer 8 · edited Jan 24 '16 at 14:56

-4

setting the tableView.opaque = false worked for me

edited Jan 24 '16 at 14:56

CodeReaper

5,988
3
35
56

answered Jan 24 '16 at 14:07

muratce

1

Container View getting pushed down as if it had a UINavigationBar?

8 Answers8

Linked