UISearchBar scope buttons in UITableView Header hide the first row of the table view

Question

I have a problem: I have a UIView that contains a UISearchBar as a header of a UITableView. The problem is that whenever I tap on the UISearchBar, the animated scope buttons come out hiding part of the first row of the table. I looked at a lot of similar questions but none of the answers worked. Is there a way to add a bottom constraint to the headerView so that the UITableView goes down of the height of the scope buttons view whenever the UISearchBar is focused and being edited?

This is the code where I add the UISearchController:

searchController.searchResultsUpdater = self
searchController.dimsBackgroundDuringPresentation = false
definesPresentationContext = true
searchController.searchBar.scopeButtonTitles = ["Groups", "People"]
tableView.tableHeaderView = searchController.searchBar
searchController.searchBar.delegate = self
searchController.searchBar.sizeToFit()
searchController.searchBar.barTintColor = darkGreen
searchController.searchBar.tintColor = yellow
searchController.searchBar.backgroundColor = darkGreen
tableView.sectionHeaderHeight = UITableViewAutomaticDimension

If you could please let me know how could I fix this bug I would really appreciate it!

Thanks!

Setting definesPresentationContext = false seems to be working for me, tried using the same code as yours.. for more info regarding this flag http://stackoverflow.com/questions/25445837/what-are-definespresentationcontext-and-providespresentationcontexttransitionsty — muneeb, Apr 13 '16 at 01:37
I did change searchController. definesPresentationContext = false but nothing changed! — Giulio Colleluori, Apr 13 '16 at 01:49
I set the definesPresentationContext false for the table view controller containing the searchController.. not for the searchController.. You have that set to true in your code above — muneeb, Apr 13 '16 at 01:52
You're right, sorry. Now I just added `definesPresentationContext = false` but still won't work. Any ideas? Thanks for the help! — Giulio Colleluori, Apr 13 '16 at 01:59

score 10 · Answer 1 · answered Jun 12 '17 at 14:13

This is happening because the HeaderView height is set to the Searchbar height which is 44 initially. But once you click on Searchbar the Searchbar is presented modally and moves to the top along with Scope buttons but the underlying HeaderView height is still the same which is 44 instead of 88 (Searchbar height + Scope button height)

For this how I have handled is -

1) Implement - UISearchControllerDelegate and assign using searchController.delegate = self;

2) Override UISearchControllerDelegate methods -

-(void) didPresentSearchController:(UISearchController *)searchController {
    [self fnResizeTableViewHeaderHeight];
}

-(void) didDismissSearchController:(UISearchController *)searchController {
    [self fnResizeTableViewHeaderHeight];
}

3) Resize TableView header height depending on the search bar height -

-(void) fnResizeTableViewHeaderHeight {
    CGFloat height = [searchController.searchBar systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;

    UIView *headerView = self.table_view.tableHeaderView;

    CGRect frame = headerView.frame;

    frame.size.height = height;
    headerView.frame = frame;

    self.table_view.tableHeaderView = headerView;
}

Solved my issue and IMHO this is the only right approach: The headerView's height is really the problem, therefore this solution addresses the underlying issue. — hibento, Aug 23 '17 at 15:31
While this works, I wish the users could not see the redraw correction. ios13 — J3RM, Nov 04 '19 at 23:19

score 2 · Answer 2 · answered Sep 12 '16 at 00:32

2

Set

searchController.hidesNavigationBarDuringPresentation = false
definesPresentationContext = false

This worked for me

answered Sep 12 '16 at 00:32

cwilliamsz

718
9
20

`searchController.hidesNavigationBarDuringPresentation` is bugged when used with scope buttons on iOS prior 13. Definitely setting this flag to `false` mitigates the issue. As of iOS 13 it works either way. – Arkadii Dec 08 '20 at 11:13

score 2 · Answer 3 · answered Mar 02 '19 at 14:46

2

In my case, setting the scope button titles was enough to get the scope bar to show, but the search control/tableview is not properly initialised, and showing all rows, until I inserted

searchController.searchBar.showsScopeBar = true

answered Mar 02 '19 at 14:46

Sven van den berghe

71
1
4

score 0 · Answer 4 · answered Apr 13 '16 at 01:54

searchController.searchResultsUpdater = self
searchController.dimsBackgroundDuringPresentation = false
definesPresentationContext = false
searchController.searchBar.scopeButtonTitles = ["Groups", "People"]
tableView.tableHeaderView = searchController.searchBar
searchController.searchBar.delegate = self
searchController.searchBar.sizeToFit()
searchController.searchBar.barTintColor = darkGreen
searchController.searchBar.tintColor = yellow
searchController.searchBar.backgroundColor = darkGreen
tableView.sectionHeaderHeight = UITableViewAutomaticDimension

Just set definesPresentationContext to false

I did change `definesPresentationContext = true` to `definesPresentationContext = false` but nothing changed. Thanks for the response anyway. Any other ideas? — Giulio Colleluori, Apr 13 '16 at 02:00

score 0 · Answer 5 · answered Jun 26 '16 at 22:55

I was having the exact same problem. It's caused by the constraint of the UITableView to the top layout guide (the navigation bar). Navigation bar slides up to reveal the searchbar and/or scope buttons and it pulls the top of the table with it. Break that constraint and you'll find that the searchbar and scope buttons move up, but the top of the first row of the table stays put. Now you've just got to figure out how to constrain the table so it has a decent height across all devices....

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

When I experienced this it came down to what I can only conclude is a bug. The only way to fix it was to setup the layout in a very specific way:

Make sure that the tableview is placed behind all other views, i.e at the top of the list of views in the viewcontroller's root view as shown in the document outline for the storyboard file.

Ensure that there is a vertical distance constraint between the tableview's top and the top margin of the viewcontroller's root view. Set it up exactly as in the screenshot. If the order of the two views is reversed, then it will not work. If the constraint is to the superview top and not to the superview top margin, then it will not work. If the constraint is to the top layout guide, then it will not work.

I have never experienced anything like this in all the time I have worked with, and it is pure luck that I had a working project to compare with and finally figure out how to get it right.

UISearchBar scope buttons in UITableView Header hide the first row of the table view

6 Answers6