Size element so it is exactly as tall as it needs to be to not scroll
-
29-09-2019 - |
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
Solution
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.
OTHER TIPS
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.