Dojo RangeSlider 핸들의 위치가 잘못되었습니다.

일부 차트가 포함될 웹 페이지와 차트의 데이터 범위 및 세분성을 제어하는 일부 RangeSlider 위젯을 조합하려고합니다. 다양한 내비게이션 아이템을 보관할 몇 가지 요소를 만들었고 RangeSliders를 배치 할 시점에 있습니다. 핸들 사이의 음영 처리 된 막대를 클릭하거나 왼쪽 또는 오른쪽으로 핸들을 이동하려면 핸들이 슬라이더 막대의 오른쪽 끝으로 이동하고 거기에 머물러 있다는 점을 제외하고는 모두 작동합니다.Dojo RangeSlider 핸들의 위치가 잘못되었습니다.

나는 내 div의 절대/상대 위치 지정과 슬라이더 구성 요소 사이의 비 호환성으로 인한 것 같지만 작동 시키려고하는 견과류가 될 것입니다. 슬라이더를 div 스타일로 배치하지 않으면 슬라이더가 작동하지만 원하는 부분이 아닙니다.

전체 파일은 아래에 나열되어 있습니다. 내 스타일 정보를 포함하여 약 80 줄에 불과합니다. 간단히하기 위해 외부 .css 파일에서 그리기보다는 div에 첨부했습니다. 이를 시험해 보려면 도장 구성 요소에 대한 경로를 조정해야합니다.

내가 가지고있는 것보다 더 많은 expetise를 가진 사람은 아마도 jiffy에서 범위를 지정할 수 있지만 내 자신의 도장 요구 사항을 조정할 수는없는 것 같습니다.

감사합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Errlog Chart for Single Host</title> 
    <style type="text/css"> 
     @import "1.7.src/dojo/resources/dojo.css"; 
     @import "1.7.src/dijit/themes/tundra/tundra.css"; 
     @import "1.7.src/dijit/themes/dijit.css"; 
     @import "1.7.src/dijit/tests/css/dijitTests.css"; 
     @import "1.7.src/dojox/form/resources/RangeSlider.css"; 
    </style> 

    <script type="text/javascript" src="1.7.src/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> 
    <script type="text/javascript"> 
     dojo.require("dojox.form.RangeSlider"); 
     dojo.require("dijit.form.HorizontalRule"); 
     dojo.require("dijit.form.HorizontalRuleLabels"); 
    </script> 
</head> 
<body class="tundra"> 
<div id='header' style="width:100%; 
    background: #FC8; 
    position: absolute; 
    height: 30px; 
    top: 0;">header</div> 
<div id='middle' style="width:100%; 
    background: #8FC; 
    position: absolute; 
    top: 30px; 
    bottom: 30px;"> 
    <div id='left' style="background: #C8F; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 25%; 
    height: 100%;"> 
    </div> 
    <div id='right' style="background: #CF8; 
    position: absolute; 
    left: 25%; 
    top: 0; 
    width: 75%; 
    height: 100%;"> 
    <div id='charts' style="background: #DF7; 
    position: absolute; 
    width: 100%; 
    top:0; 
    height:60%;"> 
CHARTS GO HERE 
    </div> 
    <div id='sliders' style="background: #BF9; 
    position: absolute; 
    width: 100%; 
    bottom:0; 
    height:40%;"> 
SLIDERS GO HERE 
    <div 
     id="hrSlider" 
     discreteValues="11" 
     onChange="dojo.byId('minValue').value=dojo.number.format(arguments[0][0]/100,{places:1,pattern:'#%'});dojo.byId('maxValue').value=dojo.number.format(arguments[0][1]/100,{places:1,pattern:'#%'});" 
     value="20,80" 
     intermediateChanges="true" 
     style="width:500px;" 
     dojoType="dojox.form.HorizontalRangeSlider"> 
     <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="11" constraints="{pattern:'#.00%'}"></ol> 
     <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:10px;margin-bottom:-5px;"></div> 
    </div> 
    Horizontal Slider Min Value:<input readonly id="minValue" size="10" value="20.0%"/><br/> 
    Horizontal Slider Max Value:<input readonly id="maxValue" size="10" value="80.0%"/><br/> 
    </div> 
    </div> 
</div> 
<div id='footer' style="width:100%; 
    background: #8CF; 
    position: absolute; 
    height: 30px; 
    bottom: 0;">footer</div> 
<script type="text/javascript"> 
</script> 
</body> 
</html>

출처

2012-06-12 user1132756

저는 여전히 비슷한 문제가 있습니다. 당신의 레이아웃이 빈 페이지보다 복잡하다면 그것은 일종의 위치 계산을하고 있고 분명히 틀린 것입니다 ... – DanMan