Ellipsis for long text in small width selects

[censys-git]

When a long option string is selected for a select of a smaller width, rather than cutting of the text, provide an ellipsis (clean, nice readability). Additional nice-to-have would be the actual text displayable (title attr?) on mouse over.

[jessestreet]

Pretty easy with some CSS:

.bootstrap-select .dropdown-menu {
  max-width: 200px;
}
.bootstrap-select .dropdown-menu span.text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

I added a cool animation feature on mouseover to scroll the text too:

var $select = $('select');

// Init selectpicker.
$select.selectpicker();

// Loop through all of the option links in the dropdown menu.
$select.data('selectpicker').$menu.find('li a').each(function () {
  var $link = $(this)
    , $text = $link.find('span.text')
    ;

  // Bind to mouseenter.
  $link.on('mouseenter', function () {
    // Clone the text & append it to the body so we can measure its natural width.
    var $clone = $text.clone().appendTo('body')
      , diff = ($clone.width() - $text.width())
      ;

    // Remove our dummy clone.
    $clone.remove();

    // If the text content is wider than the menu, animate the `text-indent`.
    if (diff > 0) {
      $text.stop(true).delay(250).animate({textIndent: '-' + diff + 'px'});
    }
  });

  // On mouseleave, animate the `text-indent` back to `0`.
  $link.on('mouseleave', function () {
    $text.stop(true).delay(250).animate({textIndent: 0});
  });
});

The appending of the text to the body works in my use-case, but if the font family or size differs between the body and the dropdown, the width measurement may be off...

[censys-git]

Thanks. Very helpful. With the mouse events, where/what is $menu ($select.data('selectpicker').$menu.find('li a').each(function () {)?

From: Jesse Street [mailto:notifications@github.com]
Sent: Friday, October 18, 2013 5:29 AM
To: silviomoreto/bootstrap-select
Cc: sl1331
Subject: Re: [bootstrap-select] Ellipsis for long text in small width selects (#351)

Pretty easy with some CSS:

.bootstrap-select .dropdown-menu {
max-width: 200px;
}
.bootstrap-select .dropdown-menu span.text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}

I added a cool animation feature on mouseover to scroll the text too:

var $select = $('select');

// Init selectpicker.
$select.selectpicker();

// Loop through all of the option links in the dropdown menu.
$select.data('selectpicker').$menu.find('li a').each(function () {
var $link = $(this)
, $text = $link.find('span.text')
;

// Bind to mouseenter.
$link.on('mouseenter', function () {
// Clone the text & append it to the body so we can measure its natural width.
var $clone = $text.clone().appendTo('body')
, diff = ($clone.width() - $text.width())
;

// Remove our dummy clone.
$clone.remove();

// If the text content is wider than the menu, animate the `text-indent`.
if (diff > 0) {
  $text.stop(true).delay(250).animate({textIndent: '-' + diff + 'px'});
}

});

// On mouseleave, animate the text-indent back to 0.
$link.on('mouseleave', function () {
$text.stop(true).delay(250).animate({textIndent: 0});
});
});

The appending of the text to the body works in my use-case, but if the font family or size differs between the body and the dropdown, the width measurement may be off...

—
Reply to this email directly or view it on GitHub #351 (comment) . https://github.com/notifications/beacon/15M0yDEA-32ANmhXfFqSzOJcgu8P-rju8FtppsgPotaIdnLjilhndUOERQGBJZd0.gif

[censys-git]

Actually, the more I look at this, I don’t want to place the ellipsis on the options but only on the selected (the one visible in the select box after selection). Ideally, the max width should apply to the select box and not the options. The options should display in full width to their text in the dropdown, but since the select box itself may be a smaller width than its options, the ellipsis is applied. Would it be simply:

.bootstrap-select > .filter-option {

max-width: 200px;

overflow: hidden;

text-overflow: ellipsis;

}

My use-case is I’d like to add a simple jQuery modifier to find perhaps a class such as “bootstrap-select-ellipsis” and/or perhaps a “data-maxwidth” attribute which would apply this on-the-fly to only those select boxes rather than applying to all.

From: Jesse Street [mailto:notifications@github.com]
Sent: Friday, October 18, 2013 5:29 AM
To: silviomoreto/bootstrap-select
Cc: sl1331
Subject: Re: [bootstrap-select] Ellipsis for long text in small width selects (#351)

Pretty easy with some CSS:

.bootstrap-select .dropdown-menu {
max-width: 200px;
}
.bootstrap-select .dropdown-menu span.text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}

I added a cool animation feature on mouseover to scroll the text too:

var $select = $('select');

// Init selectpicker.
$select.selectpicker();

// Loop through all of the option links in the dropdown menu.
$select.data('selectpicker').$menu.find('li a').each(function () {
var $link = $(this)
, $text = $link.find('span.text')
;

// Bind to mouseenter.
$link.on('mouseenter', function () {
// Clone the text & append it to the body so we can measure its natural width.
var $clone = $text.clone().appendTo('body')
, diff = ($clone.width() - $text.width())
;

// Remove our dummy clone.
$clone.remove();

// If the text content is wider than the menu, animate the `text-indent`.
if (diff > 0) {
  $text.stop(true).delay(250).animate({textIndent: '-' + diff + 'px'});
}

});

// On mouseleave, animate the text-indent back to 0.
$link.on('mouseleave', function () {
$text.stop(true).delay(250).animate({textIndent: 0});
});
});

The appending of the text to the body works in my use-case, but if the font family or size differs between the body and the dropdown, the width measurement may be off...

—
Reply to this email directly or view it on GitHub #351 (comment) . https://github.com/notifications/beacon/15M0yDEA-32ANmhXfFqSzOJcgu8P-rju8FtppsgPotaIdnLjilhndUOERQGBJZd0.gif

[caseyjhol]

The ellipsis can be taken care of with just

.bootstrap-select.btn-group .btn .filter-option {
    text-overflow: ellipsis;
}

This will only show the ellipsis if the text is cut off, but if you wanted to apply the ellipsis only on certain selects (for whatever reason), just do

.bootstrap-select.btn-group.ellipsis .btn .filter-option {
    text-overflow: ellipsis;
}

Then add the .ellipsis class to your desired selects.