1

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')); } } 
0

1 Answer 1

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"); } } 
Sign up to request clarification or add additional context in comments.

2 Comments

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.
Does element with display:none have width?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.