Web 2: Limit max width of elements

Code Sharing
1

So, you’re trying to make an webapp that looks good on mobile devices but also on desktop, without having to build duplicate WebPage controls for each device.

My first advice is to set the MinimumWidth of the WebPage to 360 (from the inspector) or else you risk having scrolling bars on mobile devices with the default setting!

Next add this code to a module of you’re choosing:

Public Sub LimitMaxWidth(Extends wc As WebUIControl, MaxWidth As Integer = 1400, Centered As Boolean = True)
  wc.Style.Value("max-width") = MaxWidth.ToString + "px;"
  If Centered Then 
    wc.Style.Value("margin-left") = "auto;"
    wc.Style.Value("margin-right") = "auto;"
  End If
End Sub

Place a WebRectangle (locked top, left and right in the inspector) in a WebPage and in the opening event add

Me.LimitMaxWidth

Have fun!

1 Like