How to remove white top space that appears on tab in others (UITabBarController)

Question

I am working on Xamarin Studio with Mono but you can respond in Obj-C or Swift I don't mind. (Please don't mind the icons, design, translations, etc on the screenshots this is WIP)

I have this strange issue I can't resolve :

A white blank space appears under the top bar of my UIView which is in a UITabBarController, at first I thought it was the "Adjust Scroll View Insets" option enabled but it is not. I also tried to remove my UIWebView and try with a Label, same problem.

The blank space only appears on views that are "tabbed" in the "Others" section of my UITabBarController (when the screen is too small). You can see on my screenshots on an iPad the white space is not here, but on every other devices (iPhone, iPhone plus) it appears !

I can put a negative top constraint if the device is not an iPad but it is not the proper way to remove it ...

You can find the screenshots of (in order) :

The storyboard view
Top Constraint of the WebView
The whitespace on iPhone (but not on iPad and Storyboard, shouldn't be here !!)
StoryBoard structure
No whitespace on iPad (this is the normal behaviour, I want it on smaller devices too)
ViewController parameters

Don't you have time to comment on your 1000 screenshots what is what? And maybe draw a line what your problem is to save the people that will help you some time trying to translate your explanation into your images? — , Jan 30 '17 at 15:07
@Sneak Hello, There is a description of each screenshots above them as you can see, I tried to make it more obvious. My problem is the whitespace that appears under the top bar on each view that are in the "other" (in the TabBar") section — Yohan Dahmani, Jan 30 '17 at 15:17
Have you tried unselect "Extent edges - Under Top Bars" ? Allso you can try to check if you set your navigationController.navigationBar.translucent = YES , if this solves your question. I will update as answer so u can mark answered, let me know — , Jan 30 '17 at 15:18
@Sneak To make the whitespace disapear I had to uncheck "Extent edges - Under Top Bars" but then the navigation bar was gray so I had to do NavigationController.NavigationBar.Translucent = false; but I found out what was that white space see my answer — Yohan Dahmani, Jan 31 '17 at 08:51
@Sneak Not really, because that white space was the NavigationBar of the MoreNavigationController but it wouldn't display, I found the way to display it. But yes your answer helped me thanks — Yohan Dahmani, Feb 01 '17 at 08:28

score 1 · Answer 1 · answered Jan 30 '17 at 20:21

That by sight the white space is exactly the nav bar is a giveaway that in adjusting for those bars something is awry.

There is a contradiction in your layout that is probably the source of the issue. You have "extend edges" selected for the map view, but you have the top of the map view constrained to the top layout guide. The top layout guide is located at the bottom of the nav bar, so if something was adjusting insets for being under the bar, and knew the bar height and assumed it was under the bar, then this would result.

That wouldn't explain why it looks correct when included in the tab bar's initial view controllers, but it's possible when it appears from more pop-up, it is added to the view hierarchy so quickly it doesn't know the exact position of the top layout guide or the top bars, and so causes the glitch, whereas in the tab bar controller tabs it makes that adjustment on one of multiple layout passes.

score 0 · Accepted Answer · edited May 23 '17 at 12:33

Thank you for your answers, I found out what was that white space.

If I want to remove it I have to uncheck "Extent edges - Under Top Bars" and then do (or the NavigationBar will be gray, see Dark shadow on navigation bar during segue transition after upgrading to Xcode 5.1 and iOS 7.1):

NavigationController.NavigationBar.Translucent = false;

But trying to resolve the issue, I tried the following code :

ParentViewController.NavigationController.NavigationBar.Translucent = false;

And the white space turned into a second NavigationBar with tools to reorganize the tabs, and no need to uncheck "Extent edges - Under Top Bars" (especially if you don't set the tranlucent to false because the second navigation bar will go under it).

I will keep that second NavigationBar (https://developer.apple.com/reference/uikit/uitabbarcontroller/1621183-morenavigationcontroller), I like it. But for some reason it wasn't displayed until I set the ParentViewController NavigationController NavigationBar Translucent to false ... I don't really get why, it should have appeared directly but ...

Note that the proper way to display this NavigationBar if it is not displayed by default is to add the line in the UITabBarController class, and not in each ViewController ...

public partial class TabBarController : UITabBarController
{
    public TabBarController(IntPtr handle) : base(handle)
    {
    }

    public override void ViewDidLoad()
    {
        CustomizableViewControllers = null; //if you want to disable the edit button
        NavigationController.NavigationBar.Translucent = false;
        base.ViewDidLoad();
    }
}

(Sorry for the french on the screenshots my device is in French ..)

How to remove white top space that appears on tab in others (UITabBarController)

2 Answers2