I’m looking for some advice on how to resize web controls and interlock their positions bassed on their size.
As an example you can see here that the text in a WebLabel wrapped when resized to a smaller width, which should automatically adjust the height of of the WebLabel. In turn, all elements below the WebLabel (in this case the Input fields) should move down.
I found some references to LayoutType, Flex, Flow, but I could not localize a documentation about how to use them, what they are for exactly and if they would address this issue.
So hopefully someone could shed shed some light on how to implement this correctly.
Thank you so much for this video. I think I get the use case for the LayoutType / Flex Layout.
However, I don’t believe that this will solve my issue of a vertically “growing” TextBox (i.e. when the browser’s width is reduced) and the necessity that subsequent elements need to be repositioned.
Because even in the video, the child elements are all of fixed size.
This makes it very hard to have a simple responsive layout, since I have to size elements vertically for the smallest horizontal scenario. For example:
That’s a real issue in Xojo Web. Every element’s size is fixed and positions are absolute. It makes it very hard to have a page grow vertically depending on the content’s dynamic size.
There isn’t an easy solution to “make the layout work like xojo’s locking mechanism” and “make the layout be responsive”. Trust me, I tried to figure that out for years.
What I usually suggest to users it to create different layouts for each size that you want to support.
I don’t know if @Brock_Nash is still around, but he made a lot of headway in this area in his own apps. You might be able to get some info from him.
I have a few controls that support auto-expanding height and return an event to the Xojo code that allows for repositioning elements based on those changes. GraffitiLabel for example.
Yes, this is my #1 issue with Xojo Web right now, causing me lots of headaches.
It enforces UI/UX limitations and compromises in basically every web app I currently work on.
I would like to be able to create web apps, with text fields, that dynamically grow/shrink vertically depending on the text length and width of the page.
As I understand, it could be solved by implementing 2 new features in Xojo Web, but maybe it’s not that simple?
Have access to a text field that has no fixed height, so that its height varies dynamically depending on its width and text length and all the text in the text field is always visible. Height of the text field could simply be set to “*” in the IDE.
Be able to set the top positioning of any/all other below elements on the page to be relative “position: relative;” instead of “position: absolute;”, maybe with a “*” as top in the IDE.
Would this be possible or is there more to it? @Ricardo_Cruz
I’m not behind the IDE and just thinking oud loud…
Browser / Server
As far as I know is that with a Xojo web-app a lot of things happen browser-side and server side.
Due to efficiency the text control is handled by the browser. Dimensions and positions are dealt with by the server.
Changing the dimensions and positions, based on the value of the text control would have to be send to the server, that sends the proper dimensions back to the browser. This causes delays, obviously.
But I might be wrong here…
CSS / Bootstrap?
A solution is to use CSS. Again, I’m just thinking out loud here… isn’t it possible to edit a Bootstrap theme, with a CSS class that deals with the dimensions?
Container Control
And maybe you could add a container control, or a rectangle, to help position other controls like a submit button or checkboxes.
Well, from what I can tell Xojo Web basically hard wires the positioning of every control with “position: absolute; height: Xpx; top: Ypx; etc.” and that kind of locks everything down.
Im hoping there is a way to change that so that we could maybe use “position: relative;” without specifying height and top, and that way gain dynamic height and top positioning of controls.
It would not affect any of the communication between the server and the browser, only the positioning of the controls.
Basically leave it to the browser to position the controls depending on the page size/dimension etc.
The second example shows how a container can also be added, nesting them. Could you guys please give it a try and explore using it?
If it makes sense, we could add some options to WebContainer to expose this behavior somehow, and make the IDE preview how it will look like at runtime.
