TableViewCell going out of bounds in the TableView

Question

I have a table view and inside that I have added a cell which has label on the right side of of the view.

Here is how my cell looks:

But when I am running the application, this is what I get. (It is being run on iPhone 6S):

As you can see, the label is being pushed out.

The result on iPhone XR are fine. Here is the screenshot for XR:

Here is the code for the view controller where the table view delegates are:

import UIKit

class TableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

@IBOutlet var tableView: UITableView!

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.dataSource = self
    tableView.delegate = self
    tableView.separatorStyle = .none

    let headerViewNibName = UINib(nibName: "HeaderCell", bundle: nil)
    tableView.register(headerViewNibName, forCellReuseIdentifier: "headerCell")
}

func  tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.row == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "headerCell", for: indexPath) as! HeaderCell
        cell.isUserInteractionEnabled = false
        return cell
    }

    return UITableViewCell()
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if indexPath.row == 0 {
        return 138
    }

    return 0
}

}

Can someone please explain why this is happening?

Edit:

Attaching screenshot for cell view with constraints visible:

it's not the cell, that getting out, it's the label, that getting out of your tableView cell. — Ratul Sharker, Jan 30 '19 at 11:02
@bseh The label has constraints on all the sides to the super view with constant value of 0 — Ankit Arora, Jan 30 '19 at 11:07
I don't know what you meant by "all sides" but if you want to position label to the right side of the cell and center vertically; these are the constraints you need: https://pasteboard.co/HYPxGBK.png — bseh, Jan 30 '19 at 11:11
I believe the problem is that the width of the table isn't 320, so try to replace 138 in the HeightFor Row method by : UIScreen.main.bounds.width*182.5/320 — marc, Jan 30 '19 at 11:29

score 1 · Answer 1 · answered Jan 30 '19 at 13:39

Just call layoutIfNeeded on your cell.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
    let cell = tableView.dequeueReusableCell(withIdentifier: "headerCell", for: indexPath) as! HeaderCell
    cell.isUserInteractionEnabled = false
    cell.layoutIfNeeded()
    return cell
}

return UITableViewCell()
}

score 0 · Answer 2 · answered Jan 30 '19 at 11:14

If i am understanding it right you have a tableview in which there are cells and a label within the cell. As you are saying you have given constraints of your label with respect to the super View you have to give constraints of the label WRT the cell itself. if you are using storyboard then drag from your label towards the cell and add constraints. Hope it helps

score 0 · Answer 3 · answered Jan 30 '19 at 11:20

As the screen size varies, the user interface should not be designed statically. First you should make proper constraints with your controller root view and table view to make the table view width match the controller root view's. And then make your label's trailing constraint not exceed the cell's trailing.

score 0 · Answer 4 · answered Jan 30 '19 at 12:42

0

You have to set frame for your headerViewNibName. and the width should be equal to the width of your View.

answered Jan 30 '19 at 12:42

Ajay saini

2,352
1
11
25

score 0 · Answer 5 · answered Jan 30 '19 at 13:25

This might happened because of improper constraints for your UITableView or .xib of UITableViewCell or Label in table cell. So go with the below steps:

Give your tableview constraints in storyboard as top, bottom, leading and trailing = 0 to it's superview.
Now go to your UITableViewCell xib and check it's frame rectangle then set the Label contraints as top, bottom, leading, trailing = 0 to it's superview and make sure that you have selected the Constrain to margins checkbox in storyboard. So that your Label will fit into it's superview that is table cell as per cell frame changes according to devices.
Now set Label text alignment property to right since you required text at right side of a view.

Now set your table cell frame into cellForRow as below:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
    let cell = tableView.dequeueReusableCell(withIdentifier: "headerCell", for: indexPath) as! HeaderCell
    cell.frame = CGRect(x: 0, y: cell.frame.origin.y, width: tableView.frame.size.width, height: cell.frame.size.height)
    self.view.layoutIfNeeded()
    cell.isUserInteractionEnabled = false
    return cell
} 
return UITableViewCell()
}

TableViewCell going out of bounds in the TableView

5 Answers5