Dynamic Height MultipleSelectorRow as per selection to show all the values selected

Question

I'm using Eureka for building a form in wherein we select multiple values from a list and we need to show all the values selected on the form. I'm using MultipleSelectorRow for this but there is no option to dynamically increase the size of the cell as per the content. We can give a fixed height but here I need to assign a dynamic height for the cell. Please guide on how this can be achieved?

I have tried giving a fixed height and it works well but dynamically deciding on the cell's height doesn't work. I have even tried to implement UITableViewAutomaticDimension row height but this also doesn't work.

<<< MultipleSelectorRow("aprovers") { row in
row.title = "Approvers"
row.options = requestedByArr
row.selectorTitle = "Select Approvers"
row.onPresent({ from, to in
// Decode the value in row title
to.selectableRowCellSetup = { cell, row in
// cell.height = ({return 60})
let size = row.cell.contentView.systemLayoutSizeFitting(UILayoutFittingCompressedSize)
row.cell.height = { size.height }
//row.cell.height = ({return UITableViewAutomaticDimension})
row.cell.detailTextLabel?.numberOfLines = 0
row.cell.contentView.setNeedsLayout()
row.cell.contentView.layoutIfNeeded()
row.reload()
self.tableView.reloadData()
if let value = row.selectableValue {
row.title = value
}
}
to.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .done, target: from, action: #selector(CategoryGroups.multipleSelectorDone(_:)))
})
row.onChange({ (row) in
//row.cell.height = ({return 100})
let size = row.cell.contentView.systemLayoutSizeFitting(UILayoutFittingCompressedSize)
row.cell.height = { size.height }
//row.cell.height = ({return UITableViewAutomaticDimension})
row.cell.detailTextLabel?.numberOfLines = 0
row.cell.contentView.setNeedsLayout()
row.cell.contentView.layoutIfNeeded()
row.reload()
self.tableView.reloadData()
})
}```

The expected results should be increased in cell's height as per the selected number of values from the multipleSelectorRow but the actually the height doesn't increase. If it increases, then UI gets distorted and data merge into the upper row.

Answer 1

We need to implement

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 100
tableView.delegate = self

with the methods

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

override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
    return 100
}

and add the following methods to MultipleSelectorRow

.cellSetup({ (cell, row) in
                cell.detailTextLabel?.numberOfLines = 0
            }).cellUpdate({ (cell, row) in

                cell.detailTextLabel!.translatesAutoresizingMaskIntoConstraints = false
                NSLayoutConstraint.activate([
                    cell.detailTextLabel!.leftAnchor.constraint(equalTo: (cell.textLabel?.rightAnchor)!, constant: 15),
                    cell.detailTextLabel!.rightAnchor.constraint(equalTo: cell.contentView.rightAnchor, constant: -15),
                    cell.detailTextLabel!.bottomAnchor.constraint(equalTo: cell.contentView.bottomAnchor, constant: -15),
                    cell.detailTextLabel!.topAnchor.constraint(equalTo: cell.contentView.topAnchor, constant: 15)
                    ])
                cell.updateConstraintsIfNeeded()
            })

There is no need to implement any other method for the height. This solved my problem by dynamically increasing the height of the multiple selector row as per the selected values.