Any work-around for WebContainer.LockBottom failing after programmatic re-size?

Targets Web
1

As reported in Feedback Case 21779:

  1. Put a WebHTMLViewer (or any WebContainer) onto a WebPage (or into a WebDialog) with all four position locks set.
  2. Put a button on the WebPage (or Dialog) with code such as HTMLViewer1.height =200 ///or whatever your WebContainer is!

Run the app and the viewer/container re-sizes with the window.
Click the button and the viewer/container no longer changes height when the window is re-sized.

Work-around urgently needed!

2

Came up with my own clunky work-around, but it only works if the WebContainer will be shifting to the same specific position every time:

  1. Create a duplicate of the WebContainer in the secondary position.
  2. Replace the WebContainer.height=x code with two lines:

FirstContainer.visible=true
SecondContainer.visible=false

and if you need to shift it back, reverse the true/false values.

Additional duplicates could be made for other potential positions as long as all the positions are pre-defined. I only needed two positions (so far), so I’m using this work-around for now, but it might also be possible to destroy and recreate the container in the new position, maybe… I didn’t try that.

3

Hi Seth,

I may have a solution, I just tested and it seems to work.
The problem is that the lock-bottom relies partially on “height: auto”. Once you change the height you loose the lock-bottom.
The trick is to change the CSS “bottom” property which is not available in Xojo, using some javascript.

Here is what I did:

I prefer to use “replaces” than to deal with quotes when building javascript, so I work with constants and replace some tokens.

Define a constant:

Public Const kJS as String = var elm = document.getElementById('%id%'); var botpx = window.getComputedStyle(elm).getPropertyValue("bottom"); // getting the bottom property value var bot = parseInt(botpx) + %reduce%; // here I increase the bottom to reduce the height elm.style.bottom = bot + 'px' ; // changing the bottom property

And when you want to reduce the height (increase the bottom):

Dim js As String = kJS js = js.Replace("%id%", cc1.ControlID) ' where cc1 is the name of your container control instance js = js.Replace("%reduce%", Str(200)) ' replace 200 by a variable if you want ExecuteJavaScript(js)

It may not work in all browsers and you may need more js …

4

If you can make your ui work this way, you might try to change the .top property of the container instead of the .height property. It seems to keep the locks.