Select Box Truncating Text When Body Font Size Changed via JavaScript on Document Ready in Ie 9

Select box truncating text when body font size changed via javascript on document ready in IE 9

Select boxes in IE suffer from a long and unfortunate history of extraordinary bugs.

In the days of IE6, the select box was a windowed OS control—a wrapper for the Windows Shell ListBox that existed in a separate MSHTML plane from most other content.

In IE 7, the control was rewritten from scratch as an intrinsic element rendered directly by the MSHTML engine. This helped with some of the more prominent bugs, but some of this unhappy legacy remains. In particular: after a select box is drawn, changes via the DOM do not always propagate as one might expect.

Here, each option in the select list is drawn to exactly the right width for the text it contains when the control is first rendered. When you increase the text size of the page, IE correctly propagates the change to the control itself but does not adjust the width of the options, so text starts overflowing to the next line:

You can fix this by forcing a repaint of the select box. One way to do this is to append a single space character to the select element:

$('select').append(' ');

Alternatively, you could change the style attribute:

$('select').attr('style', '');

Of these, the .append() strategy has the fewest potential side effects and enforces better separation of style and behaviour. (Its essential impact on the DOM is nil.)

HTML Select cutting text off

Turns out there's a simple fix (courtesy of Select box truncating text when body font size changed via javascript on document ready in IE 9):

$('select').append(' ');

Forces the select to be redrawn.

Select option text disappears partially after adding css class

Appending a ' ' to the select will force the select to "refresh", and fixes the issue in IE11. See here: https://jsfiddle.net/9kvcqc05/

$("button").on("click", function() { $("select option").each(function() {   $(this).addClass("heavyError");  });   $("select option:selected").attr("selected", false);  $("select").append(' ');});

.heavyError {  color: red;  font-weight: bold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><select style="width:480px; height:100px;" multiple><option value="test-ss">test-ss</option></select><button>test</button>

Select dropdown with fixed width cutting off content in IE

For IE 8 there is a simple pure css-based solution:

select:focus {
    width: auto;
    position: relative;
}

(You need to set the position property, if the selectbox is child of a container with fixed width.)

Unfortunately IE 7 and less do not support the :focus selector.

Raphael.js function getBBox give back NAN/NAN/NAN in IE8

I had the same problem in Rapahel 2.2.0 and 2.2.1, and using ._getBBox() didn't fix it for me.

What did fix it for me is falling back to .auxGetBBox() if it's defined and regular .getBBox() doesn't work, like this:

var bbox = path.getBBox( );

// Workaround for apparent bug in Raphael's VML module's getBBox() override
if( isNaN( bbox.x ) && path.auxGetBBox ){
  bbox = path.auxGetBBox();
}

---

I don't have a fix for the underlying bug, but I have found the source of it.

In VML mode, Raphael takes the initial getBBox() function, saves it as auxGetBBox() on the element prototype, then replaces it with a function that appears to be broken.

It has calculations based on a variable defined as var z = 1/this.paper._viewBoxShift.scale;, which clearly expects _viewBoxShift.scale to be some factor of the scale of the current viewbox compared to the initial viewbox , but actually _viewBoxShift.scale is an object like this which appears to come from paperproto.getSize():

{ height: someNumber, width: someNumber }

This is where all the NaNs are coming from. Cannae divide by an object.

So this workaround works fine if no zoom is applied using a viewbox, but may give incorrect results if a zoom has been applied (something I can't get to work at all in recent versions of raphael in VML mode, but that's a seperate question). Fixing that will involve digging deep into Raphael's VML module to pipe a proper zoom factor into this z variable.

Trying to build React Component that can iterate over a nested data structure and produce styled HTML elements based on type

Figured out what I was doing wrong and was able to display all elements correctly by pushing them to a second array within my function and returning that new array like so:

function renderElement(sections) {
  const elements = []
  
  if (sections) {
    sections.map((section) => {
      switch (section.textType) {
        case "title":
          return elements.push(section.copy.map((string) => <Title>{string}</Title>));
        case "subtitle":
          return elements.push(section.copy.map((string) => <Subtitle>{string}</Subtitle>));
        case "body":
          return elements.push(section.copy.map((string) => <Body>{string}</Body>));
        default:
          return section.copy;
      }
    });
  }
  return elements
}

HTML text-overflow ellipsis detection

Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again.

The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. If so, you know it's going to have been truncated.

For example, using jQuery:

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

I made a jsFiddle to demonstrate this, http://jsfiddle.net/cgzW8/2/

You could even create your own custom pseudo-selector for jQuery:

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

Then use it to find elements

$truncated_elements = $('.my-selector:truncated');

Demo: http://jsfiddle.net/cgzW8/293/

Hopefully this helps, hacky as it is.

JavaScript Scale Text to Fit in Fixed Div

This is somewhat of a hack, but will do what you want.

<div id="hidden-resizer" style="visibility: hidden"></div>

Place this at the bottom of your page, where it will not be moving other elements on the page.

Then do this:

var size;
var desired_width = 50;
var resizer = $("#hidden-resizer");

resizer.html("This is the text I want to resize.");

while(resizer.width() > desired_width) {
  size = parseInt(resizer.css("font-size"), 10);
  resizer.css("font-size", size - 1);
}

$("#target-location").css("font-size", size).html(resizer.html());

---

Related Topics