Dojo Horizontal Slider displays over labels

Question

I'm working on setting up a dijit.form.HorizontalSlider with labels and a rule and I can't get the display to work properly. The slider is displaying over top of the rule and the labels. I can see that the div's that the labels and rule are placed in have no height property to I'm guessing that's what my problem is, but I can't seem to fix it.

Here's the code...

//create a div for the rule in my inner node div
this.ruleDiv = dojo.create("div", {}, dojo.byId("ruleDiv"), "first");
this.getInnerNode().appendChild(this.ruleDiv);

//create a div for the labels in my inner node div
this.labelsDiv = dojo.create("div", {},dojo.byId("labelsDiv"), "first");
this.getInnerNode().appendChild(this.labelsDiv);

//create the rule object
this.sliderLabelsRule = new HorizontalRule({
    container: "topDecoration",
    count: 10
}, this.getLabelsRuleDiv());

//create the labels object  
this.sliderLabels = new HorizontalRuleLabels({
    container: "topDecoration",
    labelStyle: "font-size: 10px;",
    labels: ["test0", "test1", "test2", "test3", "test4", "test5", 
             "test6", "test7", "test8", "test9"]
}, this.getLabelsDiv());

//create the slider   
this.slider = new Slider({}, this.getInnerNode());

//startup the widgets
this.getSlider().startup();
this.getLabelsRule().startup();
this.getLabels().startup();

I've tried swapping things around and trying this a bunch of different ways, but I can't seem to find the right combination, any help is appreciated!

Answer 1

In your HorizontalRule constructor, add a style property to set the height. something like this.

this.sliderLabelsRule = new HorizontalRule({
  container: "topDecoration",
  count: 10,
  style: "height: 5px;"
}, this.getLabelsRuleDiv());

I had a similar issue where all my labels and rules where under the slider but also stacked directly on top of each other so I had ten labels and rules in one big mess, I had to set the width in the above constructor to the same width as my sliders and use position: absolute to move them into the right spot. To get them exactly where you want you may have to do something similar. Just play with the css in the style attribute of the constructor