Programatic HorizontalSlider Widget misplaces HorizontalRule with topDecoration

Submitted by crink on Fri, 03/21/2008 - 07:20.

I am developing a dijit Widget that wraps a HorizonalSlider and HorizontalRule object. This is working as expected in Firefox 2 but when I run this in IE7, the HorizontalRule is being attached to the bottomDecoration table row. Has anyone else experienced this? See below code example.

Note, Vertical Slider works with rightDecoration and leftDecoration. HorizontalSlider only works with bottomDecoration. I have also tested with dojo 1.02 and dojo 1.1 B3

dojo.declare("mySlider",[dijit._Widget, dijit._Templated], {
templateString:"",
render: function(){
var h1 = new dijit.form.HorizontalRule({
						container: "topDecoration",
						count: 5,
						style: "height:6px;"
					}, dojo.byId("slider"))


var theSlider = new dijit.form.HorizontalSlider({},dojo.byId("slider"));

theSlider.startup();
h1.startup();
}});



  var slider = mySlider({},dojo.byId("wrapper"));
   slider.render();

Login or register to post comments
Subscribe post

looks like startup is not be instatiated by IE

Submitted by crink on Sat, 03/22/2008 - 07:22.

So after tracking the attaching on the HorizontalRule to the Slider's startup function. I added a console.debug statement in the Slider's start so that I know it is being instantiated. What seems to be happening is that Firefox correctly calls the startup function and IE never does.

I have tried using the onLoad call to wrap the instantiation but it seems that IE doesn't call the slider's startup function for some reason.

Any idea's?

Resolved

Submitted by crink on Sun, 03/23/2008 - 04:43.

Figured it out,here was the issue.

As I was using a templated widget, I was using the templatestring attribute to define my wrapper widget's structure. I later use a render function to attach the HorizontalSlider and HorizontalRule. The issue came down to the fact that the element that I was attaching the HorizontalSlider to was a table element. The problem was that the in IE, declaring a table element with children renders in the browser as:

Firefox

The problem with this is the startup method was returning undefined as the tbody element was not the child widget HorizontalRule as expected.

The lesson to this issue, always use div elements when defining a structure of a templatestring which you plan to add other widgets to later.

Search