46463 - WebControl Width with Left and Right Anchors Set Not Correct until WebPage is Resized

  1. 2 years ago

    Hal G

    31 Dec 2016 Pre-Release Testers, Xojo Pro, XDC Speakers CampSoftware.com

    Just submitted Feedback Case #46463 WebControl Width with Left and Right Anchors Set Not Correct until WebPage is Resized.

    I found this as I was placing WebContainer Controls onto a PDF. The width of the controls that had Locking Anchors set to Left and Right so the control could resize was not reporting its actual width.

    Steps:

    • Create a new Web Project
    • Add a WebLabel, WebTextField, or possibly other controls.
    • Set the Locking Anchors to Top, Left, and Right so the control width will adjust to the WebPage width.
    • Run the Project
    • View the width of the controls in the browser with MsgBox or some other method and the Width will not be correct unless the browser WebPage is the same width as IDE WebPage width.
    • Resize the WebPage and control width will be correct.

    Attached is a project to demonstrate this problem.

    Project Notes:

    • In the IDE, the Width of Label1 and TextField1 are 560.
    • When the WebPage Opens and is Shown, the 'IDE width' is returned.
    • If 'Check Width' is clicked before Resizing the Page, the 'IDE width' is returned.
    • Resizing the Page returns the actual control width.
    • If 'Check Width' is clicked after Resizing the Page, the actual control width is returned.
    • Debugging and Compiled behave the same way.

    Project Log where I ran the project and then make the browser width about 5 pixels wider.
    BUTTON: WebPage1.Width = 1056 ; Label1.Width = 1016 ; TextField1.Width = 1016
    RESIZED: WebPage1.Width = 1056 ; Label1.Width = 1016 ; TextField1.Width = 1016
    BUTTON: WebPage1.Width = 600 ; Label1.Width = 560 ; TextField1.Width = 560
    SHOWN: WebPage1.Width = 600 ; Label1.Width = 560 ; TextField1.Width = 560
    OPEN: WebPage1.Width = 600 ; Label1.Width = 560 ; TextField1.Width = 560

    Expected Result:
    Get the width of an anchored WebControl without resizing the WebPage

    Actual Result:
    The width of the control in the browser is the IDE width until the page is resized.

    Example Project

  2. Edited 2 years ago

    Just out of curiosity... where do you have that msgbox call? The webpage should get a resize event as soon as it's visible to the user and notify all of the child controls as well.

    Fwiw, we can't get an accurate size until the controls are actually on the browser because all of that math is actually done on the browser itself and because they're slightly different from browser to browser.

  3. Hal G

    1 Jan 2017 Pre-Release Testers, Xojo Pro, XDC Speakers CampSoftware.com

    Hey Greg,

    I attached an example project that shows the sizes on Open, Shown, Clicking a Button, Resized by about 5px, and then Clicking the button again:

    BUTTON: WebPage1.Width = 1056 ; Label1.Width = 1016 ; TextField1.Width = 1016
    RESIZED: WebPage1.Width = 1056 ; Label1.Width = 1016 ; TextField1.Width = 1016
    BUTTON: WebPage1.Width = 600 ; Label1.Width = 560 ; TextField1.Width = 560
    SHOWN: WebPage1.Width = 600 ; Label1.Width = 560 ; TextField1.Width = 560
    OPEN: WebPage1.Width = 600 ; Label1.Width = 560 ; TextField1.Width = 560

    Right now, the widths are not reported at the correct size even once displayed. The only way I can get the correct width is to resize the window a bit. This is for controls with locked left and right anchors.

    I could understand not getting the correct size during Open, but shouldn't they be correct on Shown or even 'after' Shown?

  4. Hal G

    4 Jan 2017 Pre-Release Testers, Xojo Pro, XDC Speakers CampSoftware.com

    @Greg OLone ,

    Should controls that have their left and right anchors report the correct width during Open? During Shown? After the page has been Shown?

    Check out my example file in my first post for an example. Click the "Check Width" before and after resizing the browser window to see it in action. :)

  5. Hal G

    16 Jan 2017 Pre-Release Testers, Xojo Pro, XDC Speakers CampSoftware.com

    @Greg OLone ,

    Just for fun, I tried to resize the web page via code by adding "Self.Width = Self.Width - 1" in the Open and Shown Event Handlers.

    That resulted in the following in Chrome:
    RESIZED: WebPage1.Width = 1250 ; Label1.Width = 1212 ; TextField1.Width = 1212
    RESIZED: WebPage1.Width = 598 ; Label1.Width = 560 ; TextField1.Width = 560
    SHOWN: WebPage1.Width = 598 ; Label1.Width = 560 ; TextField1.Width = 560
    OPEN: WebPage1.Width = 599 ; Label1.Width = 560 ; TextField1.Width = 560

    The only way I can get the actual control width is to manually resize the Web Page.

    How I can force the page to resize after being shown like Safari and Firefox do?

    This example file shows what happens if you open it in each browser:
    http://campsoftware.com/files/LongTerm/Xojo/AnchoredControlWidths.xojo_binary_project.zip

  6. Hal G

    1 Mar 2017 Pre-Release Testers, Xojo Pro, XDC Speakers CampSoftware.com

    This issue was also mentioned here:

    https://forum.xojo.com/39032-browser-width-a-startup/

  7. Hal G

    3 Mar 2017 Pre-Release Testers, Xojo Pro, XDC Speakers CampSoftware.com

    This might be the same as this issue: https://forum.xojo.com/31930-webpage-webcontainer-height-issues/

or Sign Up to reply!