ability to auto-size/auto-position resizable/draggable div
Currently I am concerned only with IE7 (or greater). I am dynamically creating draggable/resizable div elements (divInner[x]) and appending those to a draggable parent div (divOuter). What I would like is:
1. each divInner[x] to have its resizable borders auto shrunk to fit the text or image that is contained within it.
2. each divInner[x] to be auto positioned within divOuter such that divInner[1].top = 0, divInner[2].top = (divInner[1].top + divInner[1].height), etc.
Currently I can get 1 XOR 2. I am instantiating each divInner with:
$(divInner).draggable().resizable();
I can get behavior 1 when I set:
$(divInner).css("position", "absolute");
but then each divInner's top = 0 (they are all stacked on top of each other).
I can get behavior 2 when I don't set .css("position") to anything, but then each divInner's border is as wide as divOuter. Furthermore, each divInner's border exhibits jumpy behavior when first resizing it. For example, if divOuter.width = 10, then divInner.width also equals 10 even though the width of text within divInner is only 5. When I grab divInner's east resize handle the first time, mouseX is at 10 and divInner.width is still at 10. Then as soon as I move the mouse to the left, divInner.width jumps to 4 and mouseX is at 9.
Any ideas how to get BOTH 1 and 2?
Thanks,
bluetrain