Question

I have a container that does not have any set dimensions. I want the size of the container to be driven by it’s contents. Like so:

    #containerTL{
    position:absolute;
    bottom: 0px;
    right: 0px;
    margin: 5px;
    border: 1px solid black;
    cursor: default;    
    }

    #content{
    position:relative;
    background: gray;
    margin: 0px;
    top: 0px;
    height: 100px;
    width: 120px;
    cursor: default;    
    }

    <div id="containerTL"><div id="content"></div></div>

I also want to move the position of the container and have it’s contents come along for the ride. Setting the position by modifying the containers style.top & style.left is easy, the problem I have is that the elements may be positioned using “bottom” or “right”. Without set dimensions, the container grows, rather than move when I set the top and left properties.

I think I understand the problem. Lets say the style specifies a bottom and left position, and I update the top and left properties using javascript, the top and left properties get set, but the style specifies a bottom property.

I suppose I could always set the bottom and right properties to “auto” once I update top and left… but what if I wanted to be able to send each element back to it’s original position, generically, without writing a special case for each element.

Here’s a fiddle to illustrate the problem: fiddle

Answer 1

You can do:

this.style.right = '';
this.style.left = '';
this.style.top = '';
this.style.bottom = '';

and it will unset anything you set via .style and revert back to what you defined in the stylesheet.

See this fiddle for an example. Clicking once moves it, clicking again should move it back to the original position.