Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Strange rendering issue. #9

Closed
leewalton opened this issue Oct 13, 2012 · 1 comment
Closed

Strange rendering issue. #9

leewalton opened this issue Oct 13, 2012 · 1 comment
Assignees
@toorshia

Comments

@leewalton
Copy link

I was just trying to build a simple layout, and I'm seeing some strange behaviour using JustGage.

It looks like the dy value is getting set, and with a non-zero dy value things some things have the dy value applied, whilst others do not.

If you try the following html, you will see the problem:

<!doctype html>
<html>
<head>
<title>Layout 1</title>
<script type="text/javascript" src="raphael.2.1.0.min.js"></script>
<script type="text/javascript" src="justgage.1.0.1.min.js"></script>
</head>
<body>
<style>
#container { 
    /* fixed cotainer */
    margin:0px auto;
    width:900px;
    height:700px;
}
div {
    /* enable to see div positions */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 1px dotted black;
}
#dash_layout1 {
    margin:0px auto;
    height:100%;
    width:100%;
}
#dash1_dials {
    width:100%;
    height:33.333%;
}
.dash1_dial {
    width:25%;
    height:100%;
    float:left;
}
.dash1_chart {
    clear:both;
    width:100%;
    height:33.333%;
}
#dash1_chart2 {
    clear:both;
    width:100%;
    height:33.333%;
}
.clear {
    clear:both;
}
#dialtest {
    display:inline-block;
    width:100%;
    height:100%;
}
</style>
<div id="container">
    <div id="dash_layout1">
        <div id="dash1_dials">
            <div id="dash1_dial1" class="dash1_dial">
                <div id="dialtest"/></div>
            </div>
            <div id="dash1_dial2" class="dash1_dial">
                DIAL
            </div>
            <div id="dash1_dial3" class="dash1_dial">
                DIAL
            </div>
            <div id="dash1_dial4" class="dash1_dial">
                DIAL
            </div>
        </div>
        <div id="dash1_chart1" class="dash1_chart">
            CHART
        </div>
        <div id="dash1_chart2" class="dash1_chart">
            CHART
        </div>
    </div>
</div>
<script>
  window.onload = function(){
    var g1 = new JustGage({
        id: "dialtest", 
        value: 6000, 
        min: 0,
        max: 12000,
        title: "Test"
      }); 
  }
</script>
</body>
</html>
@ghost ghost assigned toorshia Oct 13, 2012
@toorshia
Copy link
Owner

Thanks for noticing this, Lee.

#1
Follow this issue - it's essentially same thing. I've messed up the math that calculates certain parameters in respect to container's aspect ratio.

I'll do my best to fix it as soon as I can.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@toorshia toorshia

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@leewalton @toorshia