romaonthego / RETableViewManager

Powerful data driven content manager for UITableView.
MIT License
2.48k stars 432 forks source link

Text overlap problem in RETableViewPickerCell if text in valueLabel is too long #205

Open Daemon-Devarshi opened 9 years ago

Daemon-Devarshi commented 9 years ago

In my app I am getting a long string from server which I am assigning to valueLabel, once assigned it is getting overlapped over other labels/ components in the cell, attaching the screen-shot for your reference:

valuelabel value too long overlap problem

This problem can be reproduced in sample app by hardcoding a string in layoutSubviews (RETableViewPickerCell class), as shown below:

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.textField.frame = CGRectNull;
    self.textField.alpha = 0;
// Very long string assigned
    self.valueLabel.text = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat";
    [self layoutDetailView:self.valueLabel minimumWidth:[self.valueLabel.text re_sizeWithFont:self.valueLabel.font].width];
    [self layoutDetailView:self.placeholderLabel minimumWidth:[self.placeholderLabel.text re_sizeWithFont:self.placeholderLabel.font].width];

    if ([self.tableViewManager.delegate respondsToSelector:@selector(tableView:willLayoutCellSubviews:forRowAtIndexPath:)])
        [self.tableViewManager.delegate tableView:self.tableViewManager.tableView willLayoutCellSubviews:self forRowAtIndexPath:[self.tableViewManager.tableView indexPathForCell:self]];
} 

On debugging I found that re_sizeWithFont: method in NSString (RETableViewManagerAdditions) category is returning a long width value (~1788), because of which in layoutDetailView:minimumWidth: method in RETableViewCell class, program counter is going inside below if condition:

if (frame.size.width < minimumWidth) {
        CGFloat diff = minimumWidth - frame.size.width;
        frame.origin.x = frame.origin.x - diff;
        frame.size.width = minimumWidth;
    }

Results thus obtained are:

po frame
origin=(x=-1483.62183, y=12) size=(width=1788.62183, height=20.5)
 {
  (x=-1483.62183, y=12)
 {
    -1483.62183

    12

  }
  (width=1788.62183, height=20.5)
 {
    1788.62183

    20.5

  }
}

I think we got some clue over here ;-) (hint: check value of x)

Note: If I comment above 'if' condition then this problem does not occur.

Kindly suggest how can I resolve this issue? I think commenting if condition may break some other functionality.

ericertl commented 9 years ago

I have the same problem. Did you sort this out?

esrever10 commented 9 years ago

I have a ugly solution, but worked.

    CGFloat textWith = [self.valueLabel.text re_sizeWithFont:self.valueLabel.font].width;
    const CGFloat maxTextWith = 200.f;
    const CGFloat margin = 16.f;

    [self layoutDetailView:self.valueLabel minimumWidth:textWith];
    [self layoutDetailView:self.placeholderLabel minimumWidth:[self.placeholderLabel.text re_sizeWithFont:self.placeholderLabel.font].width];

    if (textWith > maxTextWith) {
        self.valueLabel.frame = CGRectMake(self.contentView.frame.size.width - maxTextWith - margin, self.valueLabel.frame.origin.y, maxTextWith, self.valueLabel.frame.size.height);
    }