Can card be restricted to width of view? - swift

Question

I am trying to display a card but when the detailTextLabel gets too long, it causes the card to extend beyond the view. I'm not sure if this is a bug or not. I have adjusted the .numberOfLines to various numbers but that seems to have no effect.
// Detail label.
let detailLabel: UILabel = UILabel()
detailLabel.text = "When this text gets too long it does not wrap, it will extend off the page"
detailLabel.font = UIFont(name: "Roboto-Thin", size: 18)
detailLabel.numberOfLines = 0
cardView.detailLabel = detailLabel
EDIT
Here's the full code for the cardView.
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let cardView: CardView = CardView()
// Title label.
let titleLabel: UILabel = UILabel()
titleLabel.text = self.type[indexPath.row].capitalizedString
titleLabel.textColor = MaterialColor.blue.darken1
titleLabel.font = UIFont(name: "Roboto-Medium", size: 23)
cardView.titleLabel = titleLabel
// Detail label.
let detailLabel: UILabel = UILabel()
detailLabel.text = "When this text gets too long it does not wrap, it will extend off the page"
detailLabel.font = UIFont(name: "Roboto-Thin", size: 18)
detailLabel.numberOfLines = 100
cardView.detailLabel = detailLabel
// Yes button.
let btn1: FlatButton = FlatButton()
btn1.pulseColor = MaterialColor.blue.lighten1
btn1.pulseScale = false
btn1.setTitle("Ok", forState: .Normal)
btn1.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)
// Add buttons to left side.
cardView.leftButtons = [btn1]
// To support orientation changes, use MaterialLayout.
view.addSubview(cardView)
cardView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTop(view, child: cardView, top: self.view.frame.height / 4)
MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 10, right: 10)
}
}

Answer 1

So the issue is that you are using a UITableViewController. When you add the CardView to your view property, it is actually adding it to the UITableView, which will cause it to scroll when you scroll the tableView. The other issue of it not expanding correctly is due to the "|" value in AutoLayout, that seems to be breaking when placed in a TableView. This is probably a result of how the TableView is setup mathematically.
Either way, to avoid the scrolling issue, you will need to use a UIViewController and add a UITableView as a child view to it, or if you are keen on using the UITableViewController, it should be added as a child ViewController to a parent ViewController that you would add your CardView too. This will ultimately solve your bounds issue as well.
In the Material repo -> Examples/Programmatic/SideViewController example project, you can find a tableView added as a child view, and there, you would be able to place your CardView code as you have already done so in your current project.

Answer 2

I tried your code snippet in an example project and all seems to work. I used this code
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let cardView: CardView = CardView()
// Title label.
let titleLabel: UILabel = UILabel()
titleLabel.text = "Activities dhajshd ajshd ashd kjashd jkasd jk asjkd asjk d"
titleLabel.textColor = MaterialColor.blue.darken1
titleLabel.font = UIFont(name: "Roboto-Medium", size: 23)
cardView.titleLabel = titleLabel
// Detail label.
let detailLabel: UILabel = UILabel()
detailLabel.text = "When this text gets too long it does not wrap, it will extend off the page"
detailLabel.font = UIFont(name: "Roboto-Thin", size: 18)
detailLabel.numberOfLines = 100
cardView.detailLabel = detailLabel
// Yes button.
let btn1: FlatButton = FlatButton()
btn1.pulseColor = MaterialColor.blue.lighten1
btn1.pulseScale = false
btn1.setTitle("Ok", forState: .Normal)
btn1.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)
// Add buttons to left side.
cardView.leftButtons = [btn1]
// To support orientation changes, use MaterialLayout.
view.addSubview(cardView)
cardView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTop(view, child: cardView, top: self.view.frame.height / 4)
MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 10, right: 10)
}
Both the title and detail labels are too long for a single line and the CardView responds appropriately.
So I have a suspicion that your "view" may be to wide. Can you confirm your "width" of the ViewController is at most the width of the device?