0

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

1 Answer 1

0

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/

3
  • Thank you! Surely this should be in the Kendo documentation? It may be and I've just missed it, but it should be there. The only issue that has cropped up with using this is that the gauge container div has now messed up where it appears on the screen. This image shows what I mean. By the way the site looks so rubbish because I'm trying to get the charts sorted before I layout the rest of the page :) Apr 12, 2013 at 10:29
  • Actually my proposed solution should be (and pretty sure it is) in CSS manuals since what I did is check the code generated and force what I want. The problem that you have now is due to the fact of being position: absolute, the container (gauge div) doesn't know about it's size :-( You might define a height in gauge CSS forcing its size. See stackoverflow.com/a/8463686/1802671
    – OnaBai
    Apr 12, 2013 at 11:11
  • From my point of view the actual solutions would be support an array of pointers, something that is easily doable but depends on how many people would be interested on in for implementing it or not.
    – OnaBai
    Apr 12, 2013 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.