Announcement

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

    hlayout does not auto fit until window is resized

    I don't know if this is expected behaviour, but I am displaying one vlayout with two layouts as its members. The first is an hlayout with width specified as "100%". The second is a vlayout with a width specified as "768px". Click on the "Show Window" button. The blue layout (width 100%) only takes up half of the width of the parent vlayout. Resize the window ever so slightly. Notice that the blue layout expands to the actual full width of the parent vlayout.

    What I am expecting is since the parent vlayout has been resized to fit the vlayout with actual width specified, that the blue layout would conform to this new width and expand to the size of the red layout as soon as the window opens.


    Code:
    
    isc.IButton.create({
        ID: "touchButton",
        width: 120,
        title: "Touch This"
    });
    
    isc.Label.create({
        left: 150,
        height: 20,
        contents: "<a href='http://www.google.com' target='_blank'>Open Google</a>"
    });
    
    isc.IButton.create({
        title: "Show Window",
        top: 35,
        left: 75,
        click : function () {
            touchButton.setTitle("Can't Touch This");
            modalWindow.show();
        }
    });
    
    isc.Window.create({
        ID: "modalWindow",
        title: "Modal Window",
        autoSize:true,
        autoCenter: true,
        isModal: true,
        showModalMask: true,canDragResize : true,
        autoDraw: false,
        closeClick : function () { touchButton.setTitle('Touch This'); this.Super("closeClick", arguments)},
        items: [
            isc.VLayout.create({ID: "testVLayout", width: "100%", height: 500, autoDraw: false,members:[
                isc.HLayout.create({ID: "testLayout", width: "100%", height: 50,backgroundColor:"blue",members:[
                         isc.Label.create({contents: "Edit Customer Information", wrap: false})
                         ]}),
                isc.VLayout.create({ID: "test2", width:768, backgroundColor: "red"})
                 ]
            })
        ]
    });

    #2
    You have circular auto-sizing definitions - you are telling the Window to autoSize something whose width is 100% of the Window. Set a specific width on the contents, or remove the autoSize setting.

    Comment


      #3
      I see.

      So what exactly happens when I've resized the window? Is it that at that point, the layout knows the size of the window, and therefore is resizing to fit 100% of its width?

      Comment


        #4
        I'm having a similar problem. In my case the window is set to a specific height/width when it is first created. The content is a VLayout with width and height set to 100%. The contents of the VLayout is an HLayout with a row of IButtons followed by a TabSet with width and height set to 100%.

        When the window is first displayed only the row of buttons and about half of the Tab headers show up at the top of the window. There rest is blank. If you nudge the size of the window just slightly the rest of the TabSet appears correctly.

        Comment


          #5
          Best to simply show the code.

          Comment


            #6
            I discovered my problem was due to a call to setAutoSize(true) on the Window leftover from a previous attempt at sizing. That was establishing the initial too small size. After that the calls to setHeight() and setWidth() we're resizing the Window but not triggering a redraw of the contents like resizeTo() presumably would have done.

            I just needed to get rid of the call to setAutoSize(true) and all is well.

            Comment

            Working...
            X