Question

So I have tried copying countless other posts about aligning gauges and divs on top of each other using z-index and positioning but as of yet I still havent been able to accomplish it. I currently have this(ive tested in IE and chrome with same results):

<div id="gauges">
    <div id="loggedInGauge">  //gauge creation code  </div>
    <div id="loggedOutGauge"> //gauge creation code </div>
    <div id="onBreakGauge">   //gauge creation code </div> 
</div>
<style>

             #gauges {
                position: relative;

            }
            #loggedInGauge, #loggedOutGauge, #onBreakGauge {

                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                width: 200px;
                height: 200px;    
            }

            #loggedOutGauge {

                z-index: 10;
            }
            #onBreakGauge {
                z-index: 20;
            }

</style>

Can anyone help to get the gauges on top of each other so that it looks like one gauge with three pointers?

Here is what the current output is: Imgur link to current output

Was it helpful?

Solution

Change the CSS definition to:

#loggedInGauge, #loggedOutGauge, #onBreakGauge {
    position: absolute !important;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 200px;
    height: 200px;    
}

Kendo UI defines the position por each gauge as relative overwriting your definition. Adding the ! important to it, we prevent this to happen.

Example here : http://jsfiddle.net/OnaBai/wNsRY/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top