Material: Adding a CardView on top of a TableView results in constrained cardView.

Created on 2 May 2016 · 14Comments · Source: CosmicMind/Material

I have a tableView with a nav bar (embedded). When a user taps on a row, it calls a func that adds a CardView. Problem is that the CardView gets constrained to a small section in the top right (see photo). When I run the same code on a regular view, the CardView appears properly (extends across whole screen).

The solution I found was to add a bunch of spaces in the placeholder text, it appears to push the cardView out. This doesn't seem to be the best coding practice.
noteText.placeholder = "Add your note here! "

Here's a screenshot of what is happening.

help wanted

Source

craigpearce5

All 14 comments

I wish you could share some code as well. Especially on how you are adding the cardView to the view hierarchy.

mohpor on 2 May 2016

The following func addNote() is called from override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

func addNote(){

    // Title label.
    let titleLabel: UILabel = UILabel()
    titleLabel.text = "Add Note For Parents"
    titleLabel.textColor = MaterialColor.blue.lighten2
    titleLabel.font = RobotoFont.mediumWithSize(20)
    cardView.titleLabel = titleLabel

    // Detail label.
    noteText.placeholder = "Add your note here!                                               "
    noteText.font = RobotoFont.regular
    noteText.textColor = MaterialColor.grey.darken2
    cardView.detailView = noteText


    // Yes button.
    let btn1: FlatButton = FlatButton()
    btn1.pulseColor = MaterialColor.blue.lighten1
    btn1.pulseScale = false
    btn1.setTitle("Save", forState: .Normal)
    btn1.titleLabel?.font = RobotoFont.medium
    btn1.addTarget(self, action: #selector(SingleChildTableViewController.saveNote(_:)), forControlEvents: UIControlEvents.TouchUpInside)
    btn1.setTitleColor(MaterialColor.blue.lighten2, forState: .Normal)

    // No button.
    let btn2: FlatButton = FlatButton()
    btn2.pulseColor = MaterialColor.blue.lighten1
    btn2.pulseScale = false
    btn2.setTitle("Cancel", forState: .Normal)
    btn2.titleLabel?.font = RobotoFont.medium
    btn2.addTarget(self, action: #selector(SingleChildTableViewController.dismissCard(_:)), forControlEvents: UIControlEvents.TouchUpInside)
    btn2.setTitleColor(MaterialColor.blue.lighten2, forState: .Normal)

    // Add buttons to left side.
    cardView.leftButtons = [btn2]
    cardView.rightButtons = [btn1]

    // To support orientation changes, use MaterialLayout.
    //view.addSubview(cardView)
    tableView.addSubview(cardView)
    cardView.translatesAutoresizingMaskIntoConstraints = false
    MaterialLayout.alignFromTop(view, child: cardView, top: 10)
    MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 10)
}

craigpearce5 on 2 May 2016

As far as I can see, the problem lies within this part:

tableView.addSubview(cardView)
    cardView.translatesAutoresizingMaskIntoConstraints = false
    MaterialLayout.alignFromTop(view, child: cardView, top: 10)
    MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 10)

I'm not sure if the tableview is part of the navbar's view itself, but in any case, I think you need to implement a delegate pattern here and let the navbar's superview (which controls the main real estate of the view) to handle the card view's appearance.

am I being clear enough here?

mohpor on 2 May 2016

@mohpor I think I'm too new at Swift to understand this. I think you are suggesting that instead of having the tableView place the card, have navbar which controls the superview? I don't have my machine with me now, but is that as simple as navigationController.addSubview(cardView)?

craigpearce5 on 2 May 2016

@craigpearce5 Swift is not that much different than ObjC as far as patterns are concerned, it's even simpler to implement them using Swift. But I get what you mean, it's a whole new ball game at the beginning. you see, you are trying to add a view to a part of your view hierarchy that covers only the navigation bar area. It is meant to hold that area only. It's because of it not masking to its bounds that you're even seeing that card view. you should add the card view to your main view.

mohpor on 2 May 2016

@mohpor Swift is my first (and only programming language at this point).

I had tried view.addSubview(cardView) but had the same results (card was placed in upper left corner).

craigpearce5 on 2 May 2016

just to be clear, is your table view on the same view as your navBar or you have a view controller for the table view?

P.S.: Swift is the perfect language to start off learning to program.

mohpor on 2 May 2016

@mohpor It's a tableViewController with an embedded nav Bar. So when I use view.subView... is that the same as tableView....?

craigpearce5 on 2 May 2016

that's right. they are essentially the same.
Well, let me see if I can reproduce the problem.

mohpor on 2 May 2016

👍1

try this:

  let sView = view.superview!  
  sView.addSubview(cardView)
  cardView.translatesAutoresizingMaskIntoConstraints = false
  MaterialLayout.alignFromTop(sView, child: cardView, top: 100)
  MaterialLayout.alignToParentHorizontally(sView, child: cardView, left: 20, right:  10)

mohpor on 2 May 2016

and while you're at it, Give the card view some more depth: