Width for Row Layout is zero on lightswitch html

Question

In Lightswitch html, when adding a div to rows layout, i am getting the width of div as 0.

 myapp.Home.Group_postRender=function (element, contentItem) {     
   var div = $("<div></div>").attr('id', "container")    
  div.appendTo($(element));
}

I am getting width for the div "container", as zero and also i have checked the parent for this div, $(". msls-ctl-rows-layout"), whose width is also zero. But after rendering, the width for rowslayout is 439px in dom. How to get this default width to my container on rendering.

Note: sizing for the Rows Layout is "Strech to Container"

Answer 1

At the point the postRender method fires, LightSwitch's parametric layout has yet to take place. As a result, the width of your Rows Layout group is still zero.

However, by delaying your code until LightSwitch has completed its parametric layout, you can still access the width in your postRender function. This can be achieved by using the jQuery mobile pagechange event (as the LightSwitch HTML Client uses jQuery mobile) as follows:

myapp.Home.Group_postRender = function (element, contentItem) {
    var div = $("<div></div>").attr('id', "container")
    div.appendTo($(element));

    $(window).one("pagechange", function (e, navigationData) {
        alert($(element).width());
    });
};