Expand long text items past wrapper

[tetraDB]

Hi, thanks for this great plugin.

Hope you don't mind, but I added an option that I wanted to share with you.

expandToItemText: true

}, options);

and then

// Calculate options box height // Set a temporary class on the hidden parent of the element visibleParent.addClass(tempClass);

// Set the dimensions, minimum is wrapper width, expand for long items if option is true if ((!options.expandToItemText) || ($wrapper.outerWidth() - (options.border * 2) > $items.outerWidth())) $items.width($wrapper.outerWidth() - (options.border * 2)).height() > maxHeight && $items.height(maxHeight); else { // make sure the scrollbar width is included $items.css({ 'overflow-y': 'scroll' }); $items.width($items.outerWidth()).height() > maxHeight && $items.height(maxHeight); // set scroll bar to auto $items.css({ 'overflow-y': 'auto' }); }

// Remove the temporary class visibleParent.removeClass(tempClass);

not sure if you care for this feature, but add it if you do :)

[lcdsantos]

I couldn't quite get it what you were trying to make. Your code didn't work here (I am using Firefox Nightly v29.0a1).

But is it something like this?

[tetraDB]

yes that's exactly it, when I used it it was remaining the same width as the wrapper, and it was displaying the horizontal scroll bar, did you achieve this with css alone?

[lcdsantos]

I had to code a little bit different:

var finalWidth;

// Set the dimensions, minimum is wrapper width, expand for long items if option is true
if ( !options.expandToItemText || $wrapper.outerWidth() - (options.border * 2) > $items.outerWidth() )
  finalWidth = $wrapper.outerWidth() - (options.border * 2);
else {
  // Make sure the scrollbar width is included
  $items.css('overflow', 'scroll');
  $outerWrapper.css('width', 9e4);
  finalWidth = $items.outerWidth();
  // Set scroll bar to auto
  $items.css('overflow', '');
  $outerWrapper.css('width', '');
}

$items.width(finalWidth).height() > maxHeight && $items.height(maxHeight);

// Remove the temporary class
visibleParent.removeClass(tempClass);

I temporarily set outer wrapper div width to a really big value (9e4 = 90000) so I can get correct options box width.

Don't know if this is the best approach, if you have a suggestion please share :D

[tetraDB]

That works fine for me too :) (FF 26.0) Firefox Nightly v29.0a1 must do things a little differently