1

I try to use the spin.js

I want it to pop up in the middle of the div element. So I did set:

position: 'relative' top:'50%' left:'50%'

but the top option doesn't work. After analyzing the problem I could break it down to a html/css problem: 

<div style="background-color: red">
    <div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
    1st div line<br>br line<br>br line 2
    <div>div line 1</div>
    <div>div line 2</div>
</div>

In this example the blue element should be in the middle of the red, but it isn't. and here is the fillde for it:

http://jsfiddle.net/exu77/obcg3cxv/

This is the plunker to the original version with spin.js

http://plnkr.co/edit/qwjArDtnqGZQgbkQiRYt?p=preview

Chris
  • 128
  • 2
  • 7

2 Answers2

0

I was able to get it to work by adding a height to the jsSpinner div.

<div id="jsSpinner" style="background-color:red; height: 100px;">spin in the red part
<br>br line
<br>br line 2
<div>div line</div>
<div>div line 2 </div>

As for why this works? That part I don't know.

ghodges
  • 35
  • 1
  • 6
  • thank you, in the end I want to make an attribute directive with angularJs wich I can add to any tag. and most of them probably will not have a height in pixels. So unfortunately I can't use this solution. – Chris Jun 26 '15 at 07:48
0

The position:relative must be applied to the parent element, i.e. the div that contains the spinner. The spinner itself needs position:absolute (which is the default). Here is is an updated version of your plunker where the spinner is centered inside the red box: http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview

fgnass
  • 16
  • Sorry can't upvote you yet :) but it works. As I want to do it in an attribute directive and I don't dare to change the position attribute of the element I probably have to make my own div and move all it's childs my new relative one. Or if it would be simpler to translate the % into px wich seems to be a bit tricky if the options or the element size changes a lot. – Chris Jun 26 '15 at 09:17