Size element so it is exactly as tall as it needs to be to not scroll

Question

Size element so it is exactly as tall as it needs to be to not scroll I am working on a tool to allow creating small "notes" that I then turn into Ext.Draggable items. What I would like to do is to have these items be sized no taller than they need to be.

The elements are absolutely positioned: set position: absolute with top and left and height and width values in-line. The problem is that the height values are not really very reliable.

Is it possible to set the size at something very short (say 3px), then increment the height until the scrollbars disappear? How can I tell when that occurs, and can I do it in a way that's reliable across browsers?

Code: http://github.com/artlung/ArtLung-Notes/blob/master/v2/index.js

Answer 1

In general, see Ext.util.TextMetrics.getHeight(). Note that you can't use the singleton for height determination.

However, I think that removing explicit height should generally solve your problem. That's unless you need to synchronize something like shadow overlay's size, though.

Answer 2

If an element's style.position is absolute and the style.width is determined, setting its style.height to 'auto' will make a containing box for its content and padding, with no scrollbars.