Skip to content

Web Tip: Let’s Overflow!

As a Xojo web developer probably you’re used to embedding controls inside others, like Rectangles or Containers; but I bet sometimes you don’t get the expected results. Read on to learn a quick fix that uses an extended method to correct a common problem you might run into when embedding menus.

In this example, think about a WebPopupMenu embedded inside a rectangle that is embedded in a second rectangle. If the entries added to the WebPopupMenu are wider than the width of the rectangle it is embedded in or if it has more entries than the WebRectangle height, then these entries will be cropped in the deployed app. This screenshot better shows the problem:

The solution is quite easy! Just add an extended method to the WebControl class (inside a Module, where —Pro Tip!— you would likely want to add all these kinds of utility methods) and use the following signature when creating it:

  • Method Name: ParentsVisibleOverflow
  • Parameters: Extends Source As WebControl, Value As Boolean = true
  • Scope: Global

Add the following snippet of code in the resulting Code Editor for the new method:

If source <> Nil Then

  Var parentRoots() As WebControl
  Var current As WebControl = source.Parent

  While current IsA WebControl And Not current IsA WebPage

    parentRoots.Add(current)
    current = current.Parent

  Wend

  Var set As String = If(value, "visible", "Hidden")
  Var id As String
  Var s As String

  For Each item As WebControl In parentRoots
  
    id = item.ControlID
    s = "document.getElementById('"+id+"').style.overflow='"+set+"';"
    item.ExecuteJavaScript(s)

  Next item
End If

All we need to do now in the Shown Event of the PopupMenu is call our method on the instance:

Me.ParentsVisibleOverflow

Now we see the expected items all visible in the menu!

Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Twitter @lefebvre.