Label with child doesn't resize

[claudiobosticco]

SmartClient Version: v11.0p_2016-04-26/EVAL Development Only (expires 2016.06.25_09.26.45) Licensed to: Isomorphic Software (#ISC_EVAL_NIGHTLY)

Chrome on OSX

Hello, please modify the #columnOrder sample like this:

isc.ListGrid.create({
    ID: "countryList",
    width:"100%", height:224, alternateRecordStyles:true,
    data: countryData,
    gridComponents:[
        isc.Label.create({
            contents:"My Label",
            align: "center",
            height:30,
            children:[
                isc.IButton.create({
                    title:"My Button",
                    snapTo: "R",
                    snapOffsetLeft: -5,
                })
            ]
        }),
        "header", "body"],
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital", showIf:"false"},
        {name:"continent", title:"Continent"}
    ],
    canReorderFields: true
})

You'll obtain a grid like this:


But if you resize (shrink) the browser window, you'll get this:


the label text isn't centered and its child isn't visible.

If I don't add the child to the Label, the label text remains centered.

Is it a bug or am I misusing something?

[Isomorphic]

Labels don't generally have children, and while the framework technically allows it, you can break a lot of different features of Label by adding children to them (since the definition of their "content" changes).

It's not clear exactly what final appearance you want (eg what would happen if there was little enough size the button would be over the label's content?), but the right approach here is a Layout or Canvas with the Label and Button as children.

[claudiobosticco]

Thanks for the clarification. I've reworked the test case using a Canvas as suggested:

isc.ListGrid.create({
    ID: "countryList",
    width:"100%", height:224, alternateRecordStyles:true,
    data: countryData,
    gridComponents:[
        isc.Canvas.create({
            height:30, width:"100%",
            children:[
              isc.Label.create({
                height:30, width:"100%", backgroundColor:"lightgrey",
                snapTo: "C",
                contents:"My Label",
                align: "center"
              }),
              isc.IButton.create({
                title:"My Button",
                snapTo: "R",
                snapOffsetLeft: -5,
              })
            ]
        }),
        "header", "body"],
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital", showIf:"false"},
        {name:"continent", title:"Continent"}
    ]
})

But still no luck when shrinking:


Chrome on OSX, SmartClient Version: v11.0p_2016-05-03/EVAL Development Only (expires 2016.07.03_03.32.42) Licensed to: Isomorphic Software (#ISC_EVAL_NIGHTLY)

eg what would happen if there was little enough size the button would be over the label's content?

actually it's something neither intended for handset devices, nor for very small screens (it's an editable grid with many columns), so I didn't raise the issue.

[Isomorphic]

So there's no width setting on that Canvas at all. You should probably set a width or some snapTo settings if you have something in mind for it to do when the grid resizes.

[claudiobosticco]

So there's no width setting on that Canvas at all. You should probably set a width or some snapTo settings if you have something in mind for it to do when the grid resizes.

Adding a width:"100%" to the Canvas doesn't help (I've edited the test case of the post #3 above).
I don't understand your comment about the snapTo: the canvas is in the gridComponents array. Is that the problem?

[claudiobosticco]

It's not clear exactly what final appearance you want (eg what would happen if there was little enough size the button would be over the label's content?),

actually it's something neither intended for handset devices, nor for very small screens (it's an editable grid with many columns), so I didn't raise the issue.

To clarify my use case: actually I'm trying to avoid using a section because I don't need collapsing and to avoid restyling it.

[Isomorphic]

You don't get have layoutAlign:"center" on your Canvas per docs. Having added that, if you're still having trouble, can you take a look at the Watch tab and see what size your component has been assigned? Because if there's still a problem, it doesn't seem to agree with autotests we have in this area.

[claudiobosticco]

Thanks, now with the revised test case:

isc.ListGrid.create({
    ID: "countryList",
    width:"100%", height:224, alternateRecordStyles:true,
    data: countryData,
    gridComponents:[
        isc.Canvas.create({
            height:30, width:"100%",
            layoutAlign:"center",
            children:[
              isc.Label.create({
                height:30, width:"100%", backgroundColor:"lightgrey",
                snapTo: "C",
                contents:"My Label",
                align: "center"
              }),
              isc.IButton.create({
                title:"My Button",
                snapTo: "R",
                snapOffsetLeft: -5,
              })
            ]
        }),
        "header", "body"],
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital", showIf:"false"},
        {name:"continent", title:"Continent"}
    ]
})

the label content remains centered, but the button isn't repositioned correctly:


These are the sizes before shrinking:


and after

[Isomorphic]

By leaving your Canvas at the default of overflow:"visible", you create some ambiguity when shrinking: as the right side begins to clip the Button, an overflow:"visible" Canvas would normally enlarge to make sure the Button remains visible. Set overflow:"hidden" instead since you never want to size to show the Button. See also the docs of the canvas.layoutChildren() override point for a clearer understanding of how child components may need to be resized or repositioned in the midst of a resize, to avoid overflow issues.

[claudiobosticco]

That did the trick, thank you very much.
And thanks for the pointer to layoutChildren, actually it answers other doubts I have.