UISearchBar moves down 20 pixels

Question

I have a UITableViewController T that contains a UISearchDisplayController and UISearchBar in the standard way (everything defined in a nib). T is then contained as a child view controller in the standard way by some other view controller.

The search bar displays correctly:

But when I tap into the search bar do actually search, the search bar gets taller, and the content inside the search bar drops down by what looks like about 20 pixels (er, the height of the status bar? coincidence?) Like so:

What's up with that? It's too tall. Also, the animation that makes it look like that is ungainly. Any way to prevent that unsightly growth?

Answer 1

Swift 5.x solution:

Setting edgesForExtendedLayout to none or empty will fix this issue.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    self.edgesForExtendedLayout = []
}

In the lower versions of swift the usage will be similar to below:

 self.edgesForExtendedLayout = .None
 self.edgesForExtendedLayout = UIRectEdgeNone

Answer 2

Please try using:

yourSearchBar.clipsToBounds = true

Answer 3

Not sure if this is iOS 9 specific, but setting

searchController.hidesNavigationBarDuringPresentation = NO;

solves the issue of the weird downward movement of the UISearchBar all over the containing UITableView. Of course, this does disable the nav bar - so this might not be what you want.

Answer 4

I managed to solve a very similar problem to the one you're experiencing by programmatically setting the UISearchController up like so:

Note ~ The error persists if hidesNavigationBarDuringPresentation is not set to NO.

#pragma mark - View Life Cycle

- (void)viewDidLoad {
    [super viewDidLoad];

    self.results = [[NSArray alloc] init];

//  1  \\ Results Table View
    UITableView *searchResultsTableView = [[UITableView alloc] initWithFrame:self.tableView.frame];
    [searchResultsTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:Identifier];
    searchResultsTableView.delegate = self;
    searchResultsTableView.dataSource = self;

//  2  \\ init search results table view & setting its table view
    self.searchResultsTableViewController = [[UITableViewController alloc] init];
    self.searchResultsTableViewController.tableView = searchResultsTableView;
    self.searchResultsTableViewController.view.backgroundColor = [UIColor blackColor];

//  3  \\ init a search controller with it's tableview controller for results
    self.searchController = [[UISearchController alloc] initWithSearchResultsController:self.searchResultsTableViewController];
    self.searchController.hidesNavigationBarDuringPresentation = NO;    //  √
    self.searchController.searchResultsUpdater = self;
    self.searchController.delegate = self;
    self.searchController.searchBar.barTintColor = [UIColor blackColor];

//  4  \\ Make an appropriate search bar (size, color, attributes) and add it as the header
    [self.searchController.searchBar sizeToFit];
    self.tableView.tableHeaderView = self.searchController.searchBar;
    self.tableView.tableHeaderView.backgroundColor = [UIColor blackColor];

//  5  \\ Enable presentation context
    self.definesPresentationContext = YES;
    self.tableView.backgroundColor = [UIColor clearColor];
    self.currentUser = [PFUser currentUser];
}

Added Further Details:

1. Interface Builder: UIViewController (not UITableViewController)

2. Add a UITableView with Constraints:

   a.

   b. *My Nav Bar is custom height - your "Top Space to: Top Layout Guide" may be changed

3. Add the Delegate & Data Source outlets from the added Table View to the UIViewController

   a. Don't forget to do so programmatically:

   @interface AddUsersViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
   
   @property (weak, nonatomic) IBOutlet UITableView *tableView;
   

4. In your Interface Extension:

   a. Set your UISearchConroller's Delegate and Data Source:

   #import "AddUsersViewController.h"
   
   #define ResultsTableView self.searchResultsTableViewController.tableView
   #define Identifier @"Cell"
   
   @interface AddUsersViewController () <UISearchControllerDelegate, UISearchResultsUpdating>
   
   @property (nonatomic) UISearchController *searchController;
   @property (nonatomic) UITableViewController *searchResultsTableViewController;
   @property (nonatomic, weak) UIBarButtonItem *leftBarButton;
   @property (nonatomic) NSArray *results;
   
   @end
   

Although this worked for me, I have discovered that there are other possible scenarios that could be causing this. My "issue" wasn't that the search bar moved down 20px (or so) but that it moved up. I attributed this to a customized UINavigationBar header that included an image title and custom NavBarButtons. With that in mind, here are two more possible solutions:

.

Original Scenarios:

1. Your Container View's extendedLayoutIncludesOpaqueBars Property

   a. Storyboard: Check √ "Under Opaque Bars" for the table views in storyboard.

   b. Programmatically: yourTableView(s).extendedLayoutIncludesOpaqueBars = YES;

.

2. Set scopeButtonTitles to an empty array. (below)

   self.searchController = UISearchController(searchResultsController: nil);
   self.searchController.searchResultsUpdater = self;
   self.searchController.searchBar.scopeButtonTitles = [];
   self.tableView.tableHeaderView = self.searchController.searchBar;
   

The later two answers come from THIS question and may prove to be beneficial in checking out too.

Thanks to BananaNeil's research and testing, he discovered that if you follow the my recommendations and set your searchController.searchBar.y = 0 your search bar should be exactly where you were hoping it would be. √

Answer 5

I have actually figured out my issue:

I had my UISearchBar inside of a wrapper view, which I was re-positioning as the UITableView scrolled.

The wrapper was 20px taller than the searchbar, and I set searchbar.y = 20 (for stylistic reasons). Each time I clicked on the search bar, it inexplicably grew by 20px.

At some point, I set the searchBar.y = 10, and noticed that it only grew by 10px.

And sure enough, it turns out that the growth height of the searchBar is exactly equal to it's y-position within it's immediate superview. So, when I set the searchbar.y = 0, the searchbar stopped growing.

Answer 6

Instead of using a UITableViewController, select a normal UIViewController and add a UITableView to its view. Add constraints to pin it to Top Layout Guide.Bottom, Superview.Leading, Superview.Trailing, Bottom Layout Guide.Top. Then add the Search Bar to the UITableView.

For some reason the Search Bar doesn't jump when implemented this way.

One possible reason could be that while editing the Search Controller adjusts the position of the Search Bar by offsetting the height of the Top Layout Guide. Pinning the Table View top explicitly to Top Layout Guide.Bottom helps somehow.

Hope this helps!