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

Just submitted <https://xojo.com/issue/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

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.

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?

@Greg O’Lone ,

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. :slight_smile:

@Greg O’Lone ,

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

This issue was also mentioned here:

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

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