Las manijas de dojo RangeSlider están mal colocadas

Estoy tratando de armar una página web que contendrá algunos gráficos, así como algunos widgets RangeSlider para controlar los rangos de datos y la granularidad de los gráficos. He creado algunos elementos para contener varios elementos de navegación y estoy en el punto donde quiero colocar mis RangeSliders. Todo funciona excepto que cuando hago clic en la barra sombreada entre las manijas, para mover ambas manijas hacia la izquierda o hacia la derecha, las manijas saltan al extremo derecho de la barra deslizante y permanecen allí.

Estoy bastante seguro de que se debe a una incompatibilidad entre el posicionamiento absoluto/relativo de mi div y los componentes del control deslizante, pero me estoy volviendo loco tratando de hacer que funcione. Si solo coloco el control deslizante sin ninguno de mis estilos div, el control deslizante funciona, pero no está donde lo quiero.

El archivo completo se muestra a continuación. Son solo unas 80 líneas, incluida mi información de estilo. Lo adjunté a los divs, en lugar de dibujarlo desde un archivo .css externo, por simplicidad. Para probarlo, deberá ajustar las rutas a los componentes del dojo.

Alguien con más experiencia que yo probablemente pueda analizarlo en un santiamén, pero parece que no puedo reconciliar los requisitos del dojo con los míos.

Gracias.

<!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>

preguntado el 12 de junio de 12 a las 18:06

Todavía estoy teniendo problemas similares con él. Está haciendo algún tipo de cálculo de posición y aparentemente están equivocados, si su diseño es más complejo que una página vacía... -

1 Respuestas

Si la diferencia entre el mínimo y el máximo no se puede dividir por igual entre el valor discreto, aparecen compensaciones impares. Como no establece min max, por defecto son 0 y 100. Eso es 101 valores, que no es divisible uniformemente por 11

Respondido 22 Oct 15, 13:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.