Spinner is outside of my div

EricG-Personal commented 9 years ago

I am sure I am doing something silly, but for some reason I cannot get the spinner to end up in my div. I have a simple test case, consisting of a single html file, which I have shown below.

<html>

    <head>

        <style>
            div.centered
            {
                display:        block;
                margin-left:    auto;
                margin-right:   auto;        
                width:          300px;
                height:         300px;

                border-style: solid;
                border-color: red;
            }       
        </style>

        <script src="js/spin.js"></script>

        <script>

            var spinner;
            var target;
            var resultDiv;

            function PageLoaded()
            {
                var opts = {
                              lines: 13, // The number of lines to draw
                              length: 20, // The length of each line
                              width: 10, // The line thickness
                              radius: 29, // The radius of the inner circle
                              corners: 1, // Corner roundness (0..1)
                              rotate: 0, // The rotation offset
                              direction: 1, // 1: clockwise, -1: counterclockwise
                              color: '#000', // #rgb or #rrggbb or array of colors
                              speed: 1, // Rounds per second
                              trail: 60, // Afterglow percentage
                              shadow: false, // Whether to render a shadow
                              hwaccel: false, // Whether to use hardware acceleration
                              className: 'spinner', // The CSS class to assign to the spinner
                              zIndex: 2e9, // The z-index (defaults to 2000000000)
                              top: '20%', // Top position relative to parent
                              left: '20%' // Left position relative to parent
                            };

                target  = document.getElementById( 'progress' );                
                spinner = new Spinner( opts ).spin( target )                
        }
        </script>

    </head>

    <body onload="PageLoaded()">

        <div>

            <div class="centered" id="progress"></div>

        </div>

    </body>

</html>

Here is what it looks like when rendered. I was expecting the spinner to be inside of the red div.

screen shot 2015-05-13 at 9 03 34 am

EricG-Personal commented 9 years ago

The reason why I was expecting the spinner to be inside of the red box is because the documentation says:

"Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually."

and the comments for the opts parameters say:

top: '20%', // Top position relative to parent left: '20%' // Left position relative to parent

They both say the position should be relative to the parent. Is not the red div the parent of the spinner?

So, in my case, the spinner should be offset from the top, left of the red div by 20% of the size of the red div.

What am I missing? Or have I done something wrong?

fgnass commented 9 years ago

The offset parent ist the closest ancestor that has position: relative / absolute / fixed; which isn't necessarily the element's parent element. You can fix your issue by adding position: relative to the div.centered rule.

EricG-Personal commented 9 years ago

Confirmed. Thank you. You may want to find some nice way of explaining this in the documentation for those like me who are not necessarily experts in CSS layouts.

TimothyGu commented 9 years ago

Fixed in master. Will be deployed in the next release.

fgnass / spin.js

Spinner is outside of my div #292