Canvas width="*" or height="*" error

[Hirn]

when using width="*" or height="*", an error is tracked in the canvas of the component
This can be seen in the example https://smartclient.com/smartclient-.../?id=editByRow
If you replace

isc.ListGrid.create({
    ID: "countryList",
    width:550, height:224, alternateRecordStyles:true,

on the code

isc.ListGrid.create({
    ID: "countryList",
    width:"*", height:"*", alternateRecordStyles:true,

Version SNAPSHOT_v13.1d_2024-04-02/Pro Deployment (2024-04-02)

[Isomorphic]

Star ("*") sizes can be used in the context of a Layout, but not outside of that (although we do have a fallback of basically treating it like 100%).

This example does not include a Layout so the error reported is correct.

If you have a question on how to achieve a particular layout goal, let us know.

[Hirn]

Maybe I really chose an unsuccessful example, but in the following example, this error also manifests itself


https://smartclient.com/smartclient-...AutoFitNewRows

isc.ListGrid.create({
    autoDraw: false,
    ID: "countryList",
width:"100%",
height:"*",
    alternateRecordStyles:true,
    data: countryData,
    canEdit: true,
    editEvent: "click",
    listEndEditAction: "next",
    enterKeyEditAction: "nextRowStart",
    fields: [
        {name: "countryCode", title: "Country Code"},
        {name: "countryName", title: "Country Name"},
        {name: "population", title: "Population"}
    ]
})

isc.IButton.create({
    ID: "button",
    autoDraw: false,
    title:"Edit New",
    click:"countryList.startEditingNew()"
});

isc.VStack.create({
width:"100%",
height:"100%",
    membersMargin: 10,
    members: [
        countryList, button
    ]
});

[Isomorphic]

You keep asserting there's an error, but what error do you have in mind?

There isn't a JavaScript error, and there's no warning logged by SmartClient, and the component layout is exactly as the docs tell you to expect with your settings. So what is the error you are perceiving?

[Hirn]

With the example code I provided, https://smartclient.com/smartclient-...AutoFitNewRows

isc.ListGrid.create({
    autoDraw: false,
    ID: "countryList",
width:"100%",
height:"*",
---------------------
    alternateRecordStyles:true,
    data: countryData,
    canEdit: true,
    editEvent: "click",
    listEndEditAction: "next",
    enterKeyEditAction: "nextRowStart",
    fields: [
        {name: "countryCode", title: "Country Code"},
        {name: "countryName", title: "Country Name"},
        {name: "population", title: "Population"}
    ]
})

isc.IButton.create({
    ID: "button",
    autoDraw: false,
    title:"Edit New",
    click:"countryList.startEditingNew()"
});

isc.VStack.create({
width:"100%",
height:"100%",
    membersMargin: 10,
    members: [
        countryList, button
    ]
});

the List Grid looks like this


And if I change the code to this one, then the List Grid looks like this

isc.ListGrid.create({
    autoDraw: false,
    ID: "countryList",
width:"100%",
height:"400",
------------------------

[Isomorphic]

Yes, and this is what the docs tell you should happen - it is as designed, and exactly what is desirable.

It looks like you are probably confused about the difference between VLayout and VStack. Please review the documentation for those two classes - if you are trying to fill available space, the VLayout is what you are looking for.

[Hirn]

thanks. everything works with VLayout