Announcement

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

    left side of drawPane in VLayout gets clipped

    SmartClient Version: SNAPSHOT_v11.1d_2017-04-06/Enterprise Development Only (built 2017-04-06)

    Chrome on OSX Sierra

    Hello, please try this test case in the showcase:

    Code:
    var mainPane = isc.DrawPane.create({
        autoDraw: false,
        showEdges: true,
        width: 720,
        height: 475
    });
    
    var commonProps = {
        autoDraw: true,
        drawPane: mainPane,
        canDrag: true,
        titleRotationMode: "neverRotate"
    };
    
    isc.DrawRect.create({
        left: 200,
        top: 300,
        width: 150,
        height: 100,
        title: "Rectangle"
    }, commonProps);
    
    isc.VLayout.create({
        width: "100%",height:"100%",
        overflow: "auto",
        defaultLayoutAlign: "center",
        margin: 5,
        showEdges:false,
        members: [mainPane]
    });
    Then shrink the feature explorer right layout (using the feature explorer resize bar), until its width is less than the 720px of the drawPane.
    You'll see that the horizontal scrollbar appears, but the left side of the drawPane is clipped.
    Same effect if you set and initial width for the drawPane bigger than the available space.
    I know that the showcase is a special environment, but I have this exact problem in my application.

    Click image for larger version

Name:	2017-04-11 05.15.30.jpg
Views:	138
Size:	28.2 KB
ID:	244012

    #2
    You've set the DrawPane to a fixed width of 720 then placed it centered (defaultLayoutAlign:"center") in a Layout that is less than 720px wide. So it's centered, and the left edge is cut off - this is exactly what these settings should do.

    Comment


      #3
      ok, thanks for the heads up.
      My use case is that I want it to be centered when the Layout is wider than its member, and not cut off when the scrollbar appears, so I need to do something like:

      Code:
      isc.DrawPane.create({
          ID: "testPane",
          autoDraw: false,
          showEdges: true,
          width: 720,
          height: 475,
          parentResized: function () {
              isc.logEcho('parentResized');
          }
      });
      
      isc.VLayout.create({
          ID: "testLayout",
          width: "100%", height: "100%",
          overflow: "auto",
          margin: 5,
          showEdges: false,
          defaultLayoutAlign: "center",
          resized: function () {
              var width = this.getVisibleWidth();
              var drawPaneWidth = testPane.getVisibleWidth();
              if (drawPaneWidth > width) {
                  this.setProperty('defaultLayoutAlign', 'left')
              } else {
                  this.setProperty('defaultLayoutAlign', 'center')
              }
          },
          members: [testPane]
      });
      Is it a correct approach?

      Please note: at first I tried to use parentResized on the DrawPane, but it doesn't fire. Is it a bug?

      Comment


        #4
        Originally posted by claudiobosticco View Post
        Please note: at first I tried to use parentResized on the DrawPane, but it doesn't fire. Is it a bug?
        forgot to say that I've tested with this build:
        SmartClient Version: SNAPSHOT_v11.1d_2017-04-11/Enterprise Development Only (built 2017-04-11)
        and Chrome, Safari on OSX Sierra

        Comment


          #5
          That approach is fine except.

          parentResized() will fire if the *parent* of the Layout is resized. That isn't happening here - the layout has no (Canvas) parent.

          Comment


            #6
            Originally posted by Isomorphic View Post
            parentResized() will fire if the *parent* of the Layout is resized. That isn't happening here - the layout has no (Canvas) parent.
            mh, but in the test case I've defined parentResized on the drawPane "testPane", and the layout "testLayout" is its parent, isn't it?
            Am I missing something?
            Last edited by claudiobosticco; 14 Apr 2017, 00:13.

            Comment


              #7
              Originally posted by claudiobosticco View Post
              Then shrink the feature explorer right layout (using the feature explorer resize bar), until its width is less than the 720px of the drawPane. You'll see that the horizontal scrollbar appears, but the left side of the drawPane is clipped.
              The Layout should now be behaving as expected in your situation and not clipping content, without any need for custom resizing logic. The fix has been been applied back to SC 11.0p and should be in the nightly builds dated 2017-04-15 and beyond.

              Comment


                #8
                SmartClient Version: SNAPSHOT_v11.1d_2017-04-15/AllModules Development Only (built 2017-04-15)

                I can confirm the fix is working, thank you very much!

                And what about the post #6, about parentResized not firing?

                Comment


                  #9
                  We've made a change to SC 11.1d to ensure that parentResized() is called for all children of a Layout. That will be in the nightly builds dated 2017-04-18 and beyond.

                  Comment


                    #10
                    SmartClient Version: SNAPSHOT_v11.1d_2017-04-18/AllModules Development Only (built 2017-04-18)

                    I can confirm that now parentResized it's called, thank you very much!

                    Comment

                    Working...
                    X