Can card be restricted to width of view?

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)
}

}

Are you using autolayout? Also you are adding the card as subview dynamically right? — NSNoob, Feb 12 '16 at 05:17
Yes, using autolayout. I've included the entire code in the edit. It's pretty much copy paste from the github repo. — Craig.Pearce, Feb 12 '16 at 05:31

score 1 · Accepted Answer · answered Feb 13 '16 at 16:57

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.

score 0 · Answer 2 · answered Feb 12 '16 at 14:38

0

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?

answered Feb 12 '16 at 14:38

CosmicMind

1,499
1
10
6

Through `print(self.view.frame.width)` it is telling me my view is 320px wide, which is correct for the 5S simulator. – Craig.Pearce Feb 12 '16 at 18:10
Have you found this issue on a device? Or just the 5s simulator? – CosmicMind Feb 12 '16 at 18:30
Just tried it on physical device and same problems occurs. As well, not sure if this is related or not, but if I scroll down in a TableView, the card is presented at the top (out of view). – Craig.Pearce Feb 12 '16 at 18:30
The scrolling issue has me believing that there is a hierarchy issue. Okay, may you answer these questions, and I will see if I can reproduce. – CosmicMind Feb 12 '16 at 18:49
Device OS? Device Model (5s, 6s, etc)? Material version? – CosmicMind Feb 12 '16 at 18:50
Device is iPhone 5S, OS 9.2.1, Material version 1.30.2. Just checked on simulator 6S Plus and same issue. – Craig.Pearce Feb 12 '16 at 22:23
Try updating to version 1.31.6 https://github.com/CosmicMind/Material/releases/tag/1.31.6 I am going to try testing it on a 5S. – CosmicMind Feb 13 '16 at 04:59
I actually did that today and same problem. I can zip project and send to email if you'd like. I can't make it a public repo though. – Craig.Pearce Feb 13 '16 at 05:28
Yes, send the project to support@cosmicmind.io I will take a look :) – CosmicMind Feb 13 '16 at 13:27

Can card be restricted to width of view?

2 Answers2