Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

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

    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
    Code:
    isc.ListGrid.create({
        ID: "countryList",
        width:550, height:224, alternateRecordStyles:true,
    on the code
    Code:
    isc.ListGrid.create({
        ID: "countryList",
        width:"*", height:"*", alternateRecordStyles:true,
    Version SNAPSHOT_v13.1d_2024-04-02/Pro Deployment (2024-04-02)

    #2

    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.


    Comment


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


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

      Code:
      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
          ]
      });

      Comment


        #4
        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?

        Comment


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

          Code:
          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
          Click image for larger version

Name:	Screenshot 2024-04-04 125532.png
Views:	56
Size:	53.5 KB
ID:	272081

          And if I change the code to this one, then the List Grid looks like this
          Code:
          isc.ListGrid.create({
              autoDraw: false,
              ID: "countryList",
          width:"100%",
          height:"400",
          ------------------------
          Click image for larger version

Name:	Screenshot 2024-04-04 125619.png
Views:	46
Size:	56.4 KB
ID:	272082

          Comment


            #6
            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.

            Comment


              #7
              thanks. everything works with VLayout

              Comment

              Working...
              X