Truco Web: WebPopupMenu embebidos… ¡sin recortes!

Como desarrollador Xojo Web probablemente estés acostumbrado a embeber algunos controles en otros, como por ejemplo en rectángulos o contenedores; pero en algunos casos los resultados no son los esperados.

Por ejemplo, pongamos por caso que quieres incluir un WebPopupMenu dentro de un rectángulo que está contenido, a su vez, en un segundo rectángulo.

Bajo este supuesto, y si las entradas añadidas al WebPopupMenu tienen una longitud superior que el ancho del rectángulo que las contiene, o bien el menú tienen una cantidad de entradas superior a la altura del rectángulo contenedor… entonces dichas entradas quedarán recortadas (no visibles) cuando se utilice la aplicación.

La siguiente captura de pantalla ilustra de mejor modo el problema:

La solución es bastante simple, en cualquier caso. Sólo hemos de añadir un método de extensión de clase para WebControl (dentro de un módulo donde probablemente querrás añadir todo este tipo de métodos), y utilizar la siguiente signatura cuando creemos el nuevo método:

Nombre de Método: ParentsVisibleOverflow
Parámetros: extends Source As WebControl, value As Boolean = true
Ámbito: Global

Incluyendo el siguiente fragmento de código en el Editor de Código asociado con el nuevo método:

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
  Var id As String
  Var s As String

  For Each item As WebControl In parentRoots

    set = If(value,"visible","Hidden")
    id = item.ControlID
    s = "document.getElementById('"+id+"').style.overflow='"+set+"';"
item.ExecuteJavaScript(s)

  Next item
End If

Ahora, todo lo que tenemos que hacer es llamar a nuestro método desde el Evento Shown de la instancia PopupMenu en cuestión:

me.ParentsVisibleOverflow

De modo que los ítems del menú estén visibles al utilizar la aplicación independientemente de cuál sea el ancho o altura de los elementos en los cuales está contenido: