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.

P.S: 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
            }

the cells/tableview are in dynamic so everything is done via xib/controller — Kinja, Apr 16 '18 at 09:36
@Kinja Have added the answer for you reference, Hope it helps you — Abhirajsinh Thakore, Apr 16 '18 at 09:46
@Kinja you set your "UILabel" property "numberOfLines" = 0 and add "UILabel " Top , bottom , leading , trailing Constraints — Dixit Akabari, Apr 16 '18 at 09:46
Possible duplicate of [AutoLayout in UITableview with dynamic cell height](https://stackoverflow.com/questions/23724732/autolayout-in-uitableview-with-dynamic-cell-height) — Kuldeep, Apr 16 '18 at 09:58

Abhirajsinh Thakore · Answer 1 · 2018-04-17T09:19:37.643

0

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:

edited Apr 17 '18 at 09:19

answered Apr 16 '18 at 09:38

Abhirajsinh Thakore

1,806
2
13
23

must i apply this to the detail text label as well? – Kinja Apr 16 '18 at 09:50
@Kinja yes every label in the table view cell. This will make the text in two lines – Abhirajsinh Thakore Apr 16 '18 at 09:51
@Kinja Have you given the Top, Bottom , leading and Trailing Constraints to the label? This make the best effect – Abhirajsinh Thakore Apr 16 '18 at 09:57
Also show me your current constraints, That will help me finding you issue – Abhirajsinh Thakore Apr 16 '18 at 10:00
apparently the constraints for both my labels are locked. could u do it for yours? – Kinja Apr 16 '18 at 12:12
@Kinja You can see the Edited answer with the Constraints explained. And working Output. – Abhirajsinh Thakore Apr 16 '18 at 13:26
sorry but how do u even get to that constraint page? I'm relatively quite new to swift. apologies – Kinja Apr 17 '18 at 05:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169131/discussion-between-abhirajsinh-thakore-and-kinja). – Abhirajsinh Thakore Apr 17 '18 at 05:19
@Kinja Edited the Answer for Auto resizing Have a look into it. – Abhirajsinh Thakore Apr 17 '18 at 09:20

score 0 · Answer 2 · answered Apr 16 '18 at 09:43

0

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

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

answered Apr 16 '18 at 09:43

Nitish

13,845
28
135
263

must i apply this to the detail text label as well? – Kinja Apr 16 '18 at 09:50
If you want multiple lines for detail text label as well, then **yes**. – Nitish Apr 16 '18 at 09:53
if thats the case, the problem still occurs. my text label did not do a line break – Kinja Apr 16 '18 at 09:54
How does it look now ? – Nitish Apr 16 '18 at 09:57
Can I see your heightForRowAtIndexPath ? – Nitish Apr 16 '18 at 09:57
i never implemented any heightforrowatindexpath – Kinja Apr 16 '18 at 10:06
Try this in viewDidLoad : tableView.estimatedRowHeight = 85.0 //use an appropriate estimate tableView.rowHeight = UITableViewAutomaticDimension – Nitish Apr 16 '18 at 10:24

Dixit Akabari · Answer 3 · 2018-04-16T10:20:47.493

0

You set your UILabel property numberOfLines = 0

set UILabel Top , bottom , leading , trailing Constraints.

add UITableViewDelegate method.

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

also set your vote Constraints like this.

select your vote UIButton set Constraints
1. step set Top , bottom , leading , trailing and fix width.

step set vertically center Constraints

edited Apr 16 '18 at 10:20

answered Apr 16 '18 at 09:55

Dixit Akabari

2,419
13
26

is there a step-by-step tutorial on how to do the constraints? I'm so sorry I'm relatively quite new to swift – Kinja Apr 16 '18 at 10:11
@Kinja see update answer for set vote UIButton constraints step. – Dixit Akabari Apr 16 '18 at 10:21
https://ibb.co/fmKVhS apparently its locked i can set it (even if i untick "Constraint to margins" – Kinja Apr 16 '18 at 10:35
@Kinja something wrong it's working for me try to quit xcode and reopen again.where is your vote button?. – Dixit Akabari Apr 16 '18 at 10:49
oh shit sorry dixit, i might have said wrongly, its not a button, just a text label that segues to the next page – Kinja Apr 16 '18 at 11:12
@Kinja Yes set UILabel trailing Constraints greater than or equal from superView. – Dixit Akabari Apr 17 '18 at 04:14

Manish Mahajan · Answer 4 · 2018-04-16T10:13:55.917

0

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
}

edited Apr 16 '18 at 10:13

answered Apr 16 '18 at 09:58

Manish Mahajan

2,062
1
13
19

how can i set my Vote > constraints? – Kinja Apr 16 '18 at 10:00
@Kinja see my ans. – Dixit Akabari Apr 16 '18 at 10:04
it is a button that segues to another page – Kinja Apr 16 '18 at 10:07
Ok then whats problem.. set constraint top, bottom , leading to cell content view and horizontal spacing with Title Label – Manish Mahajan Apr 16 '18 at 10:09
Also make sure you have set title label top, bottom and leading constraint to cell content view – Manish Mahajan Apr 16 '18 at 10:10

Scott.N · Answer 5 · 2018-04-16T10:10:51.853

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!

Tableview - Title overlapping Detail (Swift)

5 Answers5

Edit : Demo of the TableView Constraints

Edit To see the Constraints

Edit 2