WebPopupMenu: how do I control height of the drop list?

Targets Web
1

I need some help with WebPopupMenu control in latest Xojo 2023r4.
I would like get the vertical scrollbar visible if number of entries in the WebPopupMenu is beyond say 20 entries. Currently the drop list is long and vertical scrollbar is not visible.
Any suggestions?

2

You can upvote this Issue:
#70442 - Allow us to set the max height for WebPopup

and/or add comments to it.

3

In the meantime, you can add this method to a module:

Public Sub DropdownHeight(extends p as WebPopupMenu, assigns value as Integer)
  var valueString as String = value.ToString + "px"
  
  var exec() as String
  exec.Add( "(function() {" )
  exec.Add( "  let menu = document.getElementById('" + p.ControlID + "_menu');" )
  exec.Add( "  menu.style.height = '" + valueString + "';" )
  exec.Add( "  menu.style.maxHeight = '" + valueString + "';" )
  exec.Add( "})();" )
  p.ExecuteJavaScript( String.FromArray( exec, "" ) )
End Sub

Then call in the WebPopupMenu’s Shown instance like this:

me.DropdownHeight = 100
6 Likes
4

Anthony, thanks for the code snippet. I am going to keep it for reference. In the meantime we have implemented something in CSS to set the height of the drop list:

.dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
}

The above appears to be working. We use “yarn build” to compile CSS.