title: Removing the blank spaces on left and right side of the UISearchBar
body: <p>I am creating a UI component that should display a <code>UILabel</code> and a <code>UISearchBar</code> below.</p>
  
  <p>However, I am not able to align them, the <code>UISearchBar</code> always has extra space on both left and right side (highlighted RED).</p>
  
  <p>I was trying to set the dimensions of <code>searchBarTextField</code> by layout anchors directly, but it didn't work.</p>
  
  <p>I would prefer to do it using layout anchors when possible.</p>
  
  <p><code>SearchBar.m</code>:</p>
  
  <pre><code>-(id) init {        
      self.titleLabel = [UILabel new];
      self.searchBar = self.searchController.searchBar;
      UIView *searchBarWrapper = [UIView new];
  
      [self.view addSubview:self.titleLabel];
      [self.view addSubview:searchBarWrapper];
      [searchBarWrapper addSubview:self.searchBar];
  
      [self.titleLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
      [searchBarWrapper setTranslatesAutoresizingMaskIntoConstraints:NO];
      [self.searchBar setTranslatesAutoresizingMaskIntoConstraints:NO];
  
      //[self.titleLabel.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:1.0].active = YES;
      [self.titleLabel.heightAnchor constraintEqualToConstant:14.0].active = YES;
      [self.titleLabel.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
      [self.titleLabel.leftAnchor constraintEqualToAnchor:self.view.leftAnchor].active = YES;
      [self.titleLabel.rightAnchor constraintEqualToAnchor:self.view.rightAnchor].active = YES;
      //[self.titleLabel.bottomAnchor constraintEqualToAnchor:searchBarTextField.topAnchor].active = YES;
  
      [searchBarWrapper.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:1.0].active = YES;
      //[self.searchBar.heightAnchor constraintEqualToConstant:36.0].active = YES;
      [searchBarWrapper.topAnchor constraintEqualToAnchor:self.titleLabel.bottomAnchor].active = YES;
      [searchBarWrapper.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
      [searchBarWrapper.leftAnchor constraintEqualToAnchor:self.view.leftAnchor].active = YES;
      [searchBarWrapper.rightAnchor constraintEqualToAnchor:self.view.rightAnchor].active = YES;
  
      [self.searchBar.topAnchor constraintEqualToAnchor:searchBarWrapper.topAnchor].active = YES;
      [self.searchBar.bottomAnchor constraintEqualToAnchor:searchBarWrapper.bottomAnchor].active = YES;
      [self.searchBar.leftAnchor constraintEqualToAnchor:searchBarWrapper.leftAnchor].active = YES;
      [self.searchBar.rightAnchor constraintEqualToAnchor:searchBarWrapper.rightAnchor constant:16.0].active = YES;
  
      return self;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7KHJD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7KHJD.jpg" alt="Left and right spaces highlishted"></a></p>
  
  <p>The <code>UISearchBarTextField</code> is embedded in a <code>UIView</code> to which I don't have access to.</p>
  
  <p>The constraints:</p>
  
  <p><a href="https://i.stack.imgur.com/9YLXL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9YLXL.png" alt="The constraints and view hierarchy"></a></p>
  
  <p>The approach by @BenOng - works fine, but breaks after tapping for the first time:</p>
  
  <p><a href="https://i.stack.imgur.com/mBylr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mBylr.png" alt="Tapping"></a></p>