Find element's automatic width with jquery / js

Question

In IE, on Focus I want to potentially expand the width of an element to width: auto only where the automatic width is wider then the static width I have set. What Im trying to avoid is just always setting the element to width: auto and having the element shrink. I only want it to expand where necessary.

Anyone have a clean way to check what the elements width would be when set to auto with out having to first set the attribute? Right now, I set it, then check the width and potentially set it back to static, seems like there should be a cleaner solution.

Example of current code with jquery:

$('mySelector').live('focus', function() {
      //store the original width, then set the element to width: auto
      $(this).data('w', $(this).width()).css('width', 'auto'));
      //is the element now shorter?  if so, set it back to the original width
      if ($(this).width() < $(this).data('w')) {
         $(this).width($(this).data('w'));
      }
   }

Andrew Whitaker · Accepted Answer · 2011-02-07 23:06:05Z

1

Not sure if you will find a cleaner solution, but here's one that doesn't involve manipulating the element itself:

function adjustWidth($el) {
    var $clone = $el.clone().css({width: "auto", display:"none"}).appendTo($el.parent());
    var width = $clone.width();
    $clone.remove();

    if (width > $el.width()) {
        $el.css("width", "auto");
    }
}

answered Feb 7, 2011 at 23:06

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kmfk Over a year ago

Thanks andrew - was hoping I was missing a standard property or method - but I do like the idea of editing a cloned element versus the original to grab the width.

Serhii Holinei Over a year ago

Does element with display:none have width?

Collectives™ on Stack Overflow

Find element's automatic width with jquery / js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related