Appending multiple jquery widgets to container

Question

I currently am trying to append multiple widgets to a container.

$( "#addbutton" ).click( function() {  
    newid++;
    $("#designspace").append($("<div></div>").mywigdet({id:newid,top:100,left:100,width:100,height:100,color:"blue",text:"Hello"}));        
});

with this way I need to create a div and then add the widget into that div. The widget itself does the following in the _create

 ...
 this._container = $('<div class="label-container" id="' + newid +'" style="position:relative; border:1px solid black;"></div>').appendTo(this.element);
 this._setOptions({
      'top': this.options.top,
      'left': this.options.left,
      'width': this.options.width,
      'height': this.options.height,
      'color': this.options.color,
      'text': this.options.text
 });
 ...

while it works this creates one container inside another.

But because I have relative positioning code in my widget this method prevents it from working as the blank container DIVs position is the parent.

I can move the position stuff into the container DIV but this would take away some of the flexibility of using widgets.

Is there a better way to accomplish adding multiple widgets to one container, without creating sub-containers?

Answer 1

I haven't really played with jquery-widgets before. I think your problem is:

this._container = $('<div class="label-container" id="' + newid +'" style="position:relative; border:1px solid black;"></div>').appendTo(this.element);

Rather modify this.element itself by using:

$(this.element).attr('id',newid);

$(this.element).addClass('label-container');
...   

Edit: I'd recommend replacing the style attribute with another css class.

JQuery CSS

JQuery addClass