Tableview - Title overlapping Detail (Swift)

Question

The image attached says it all. Is there any way to prevent the title from overlapping such as automatically moving to a second line whenever it reaches its limit? programatically/through interface builder.

PS: im retrieving the names from firebase database. this is a voting page and title are the booth names

TableView Controller

import UIKit
import FirebaseDatabase

var pitchData = [String]()
var myIndex = 0
class PitchTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationController?.setNavigationBarHidden(false, animated: true)

        self.navigationController?.navigationBar.titleTextAttributes = [ NSAttributedStringKey.font: UIFont(name: "Gotham Rounded", size: 19)!]
        ref = Database.database().reference() //set the firebase reference
        // Retrieve the post and listen for changes
        databaseHandle = ref?.child("Afternoon13").queryOrdered(byChild: "BoothPosition").observe(.value, with: { (snapshot) in
            pitchData.removeAll()

            for child in snapshot.children {
                let snap = child as! DataSnapshot
                let key = snap.key


                pitchData.append(key)

            }
            self.tableView.reloadData()
        })
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: - Table view data source

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return pitchData.count
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.font = UIFont(name: "Gotham Rounded", size: 20)
        cell.detailTextLabel?.font = UIFont(name: "Gotham Rounded", size: 20)
        cell.textLabel?.text = pitchData[indexPath.row]

        switch (pitchData[indexPath.row]) {
        case "ARC - attract, retain and cultivate":
            let returnValue: Int = UserDefaults.standard.integer(forKey: "voting")
            if (returnValue == 1)
            {
                cell.detailTextLabel?.text = "Completed ✓"
                cell.detailTextLabel?.textColor = UIColor.green
                cell.isUserInteractionEnabled = false
            }
            else {
                cell.detailTextLabel?.text = "Vote ᐳ"
                cell.detailTextLabel?.textColor = UIColor.blue
            }
        case "Anytime RCs":
            let returnValue: Int = UserDefaults.standard.integer(forKey: "voting1")
            if (returnValue == 1)
            {
                cell.detailTextLabel?.text = "Completed ✓"
                cell.detailTextLabel?.textColor = UIColor.green
                cell.isUserInteractionEnabled = false
            }
            else {
                cell.detailTextLabel?.text = "Vote ᐳ"
                cell.detailTextLabel?.textColor = UIColor.blue
            }

Answer 1

You need to set lines to 0:

You can set it directly from StoryBoard:

or you can set Programmatically:

cell.textLabel?.numberOfLines = 0
cell.detailTextLabel?.numberOfLines = 0

Hope this Help.

Edit : Demo of the TableView Constraints

I have taken two labels in the cell next to each other:

This is my Output of TableView:

This is constraint of label First:

This is the Constraints of label 2:

And yes it worked for me, The text is multi line with no text cutting, please double Check your constraints with this.

Edit To see the Constraints

Select the label and then Select the Show the Size Inspector:

Scroll Down and you can see the given constraints.

Edit 2

As per you description you have Auto resizing:

So you can use the following :

For label One

For label second:

Answer 2

Since you are using default UITableViewCell 's textLabel , this should fix everything :

cell.textLabel.numberOfLines = 0;
cell.textLabel.lineBreakMode = .byWordWrapping;  

Answer 3

You set your UILabel property numberOfLines = 0

2. set UILabel Top , bottom , leading , trailing Constraints .

3. add UITableViewDelegate method.

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return UITableViewAutomaticDimension } 

4. also set your vote Constraints like this.

5. select your vote UIButton set Constraints

   1. step set Top , bottom , leading , trailing and fix width.

2. step set vertically center Constraints

Answer 4

Make sure three things:-

• Title label has bottom, top and leading constraint with cell content view as well as horizontal spacing with Vote >, and Vote > button has all constraint like top bottom leading and horizontal space with title.
• Title label has set numberOfLines = 0

• Set dynamic height of cell using UITableViewAutomaticDimension in heightForRowAt

   func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return UITableViewAutomaticDimension } 

Answer 5

Let try with code

// in view did load:
self.tableView.rowHeight = UITableViewAutomaticDimension

// cell row at indexpath
let reuseIdentifier = "cell"
        var cell:UITableViewCell? =
            tableView.dequeueReusableCell(withIdentifier: reuseIdentifier)
        if (cell == nil)
        {
            cell = UITableViewCell(style: .value1,
                                   reuseIdentifier: reuseIdentifier)
        }

        // your customize font, color... here

        cell!.textLabel?.numberOfLines = 0;
        cell!.detailTextLabel?.numberOfLines = 0;

        return cell!