Client-Side Responsive Layout in Xojo Web

[Jana_El_Mourad]

Hi everyone,

I’m trying to create a fully client-side responsive layout in Xojo Web using CSS flexbox to avoid server-side resizing logic that slows down the app when many controls are present.

I tried injecting CSS directly in the container’s Shown event, but it had no effect.

I’m a bit confused about how to work with the Xojo frontend and properly apply client-side styling and layout.

I have a working HTML/CSS example I want to mimic and a simple Xojo test project. I’ll share both.https://drive.google.com/drive/folders/1Xkre29Aa6RodcKUgvCP6WWNTH7YoxKVq?usp=drive_link
Any guidance or examples would be appreciated!
Thanks!

[Hanif_Saad]

You could try to search for Brock Nash’s previous work on responsive web layout with XOJO
Here is one of the links to a simpler example by him:

Web2.0 Very Simple Responsive Flex Layout

Here’s a very simple sample project showing this in action: There’s a known issue with TabIndex not working across containers: <https://xojo.com/issue/61609> To fix the tab order I’ve had to disable the Xojo custom tab engine: ExecuteJavascript("XojoWeb.TabEngine.currentTabEngine = function(x){};")

You need to change the event handler for ValueChanged to TextChanged for the WebTextField in this example to make it work with the current version of XOJO.

[Jana_El_Mourad]

Thanks for the reply, I checked the example, but it’s not quite what I need.

I have three containers that should resize with the screen while keeping a constant gap. Below them, I have other elements that should always take a fixed percentage of the screen width.

So I’m aiming for a layout that scales responsively, not one that rearranges or stacks elements.

[Ricardo_Cruz]

Can you create an screenshot, Figma, Canva or something showing what you want to create?

[Jana_El_Mourad]

I’ve uploaded an example of what I’m trying to create. The file is called html_css_example.html and is available here : XojoWeb_Flexbox_Layout_Sample - Google Drive

[Jana_El_Mourad]

Here’s a short video showing the HTML I’m trying to recreate

[David_Cox]

If you don’t mind paying for a plugin, you get that functionality with GraffitiSplitView.

[Anthony_G_Cyphers]

GraffitiResponsive would be the best control for this, but it can be accomplished using just CSS classes in Bootstrap. Here’s an example:

rowcol_example.xojo_binary_project.zip (9.8 KB)

[Jana_El_Mourad]

Thank you so much, your help is much appreciated!