How to do this common web page behavior in WEB Core?

Schwartz_David · July 30, 2023, 9:32am

You can create a web page that's got an HTML TABLE on it that's a fixed width. In the rows, you can add content to it that can expand vertically in a fairly unlimited fashion. It's a well-known way to make long-format sales pages.

I need to create something similar with three sections: the top and bottom sections are mostly a fixed height, but I'd like the middle section to just adjust to take up as much room as it needs. Actually, I'd show different content there depending on the day.

I realize this isn't exactly how Delphi forms are designed. But the alternative is to break the middle section up into shorter chunks that might use a scrollbox or tabbed notebook to squeeze them into a fixed height.

Or would the whole thing be treated like an "infinite scroll" like on lots of social media sites where it just scrolls on and on until you hit the end (if you ever do)?

I also thought ... maybe I'd be better off just generating a normal web page, but then again, that's what WEB Core produces. So ... how can I get that visual effect (as opposed to your typical form)?

AndrewSimard · July 30, 2023, 6:27pm

There are many ways to accomplish this in TMS WEB Core. Using tables for layout isn't really a thing anymore, thankfully. How you set about this will depend largely on how Delphi-like you want it to be.

One approach is to just use TWebPanels as you would in a Delphi app. Set the alignment of one to the top, one to the bottom, and one to Client and you'll get some variation of what you're after.

Another approach is to use TWebHTMLDiv components, though you can use TWebPanels as well. Here we're doing a similar kind of alignment but using CSS properties instead of Delphi alignment. Add three to the page. Set the ChildOrder to 1, 2, and 3 for the top, middle, and bottom. Set the ElementPosition for all three to Relative. Set the HeightStyle for the top and bottom components to Fixed with some value, like 75 or something. Set the middle component HeightStyle to Auto. It will then stretch to fit its contents vertically. Set the WidthStyle for all three to Percent, and set the WidthPercent to 100.

Another approach is to use CSS Flex. This is easiest if you use Bootstrap in your project. Adding the same three elements again (TWebHTMLDiv or TWebPanel), set the ElementPosition to Ignore. In ElementClassName for each, add order-1, order-2, or order-3 to set the order. Set the WidthStyle as before to Percent, and WidthPercent to 100%. The HeightStyle can be set the same as well, using Absolute with a fixed value. For the Form's Element ClassName property, add d-flex w-100 flex-column to get it to put the elements in order and stack them vertically.

There are about a thousand other things that can be done, but this gets you a header, footer, and middle section. How the middle section changes with excess or insufficient page height, and its own content, is where these start to diverge. You can also use CSS rules to apply a minimum height to the middle section so it doesn't shrink too much, or any number of other rules to get the contents of each to stretch or center themselves.

And we've not even gotten to scrollbars yet. Lots of options there depending on whether you want the footer at the bottom to be fixed at the bottom with the middle content scrollable, or if you'd rather avoid scrollbars and have to scroll to the bottom to see the footer. Likewise for content that is too wide for any of the sections - do you want the content to shrink down, wrap, disappear, etc. etc.

Nothing but options here.

Schwartz_David · July 31, 2023, 9:33am

Well, that leads to the question of what component do you use that lets you add stuff to it and it expands vertically automatically so no scrolling is needed? Both forms and TWebMemos are fixed-height components. Scrollbars are added if needed to memos. And a panel is also fixed-height even if it's aligned with the client and it doesn't chage if you don't stretch the form's height (by adjusting it's bottom border).

I'd guess that a web page starts out life as a big scroll box that's client-aligned, then you put everything inside of that?

I often get an effect in my phone browser when I slide my finger down on the screen where the browser refreshes instead of moving the text downward (to expose the top).

I'm just not familiar enough with how to get a WEB Core app to behave like a regular web page in situations like this. My Dephi experience is getting in the way.

AndrewSimard · July 31, 2023, 7:24pm

Yes, perhaps Delphi's VCL mannerisms are interfering with how you might envision using the equivalent components in a TMS WEB Core environment.

When an element is ultimately rendered on a page, there may be a number of things involved in determining its initial placement (position and size on the page) and several more that may come into play as the contents of an element change, or even as the page itself changes due to the placement or changing content of other elements, the orientation of the page itself or its size as the user rotates their device or adjusts the zoom level, for example.

In fact, I've come to think of a page as a giant web (not really what www is intended to be but it works!). You place elements on the web (the page) and then rules are applied that pull, push, and stretch them around in different directions until you end up with the page as it is rendered. How complex that process is depends largely on how complex you want it to be.

TWebMemos for example can very much be used in a non-fixed-size manner. TWebPanels and TWebHTMLDiv components as well. The HeightStyle and WidthStyle are used to indicate whether this is being done. For example:

Absolute implies a fixed size as in number of pixels on the page.
Auto implies that the size will shrink/grow to fit whatever content it contains.
Percent implies that the size will be adjusted relative to the space available on the page.

There are different defaults applied for these properties when you have Bootstrap installed vs. when you don't. There are other rules that may come into play that can override these rules or add additional nuance. For example, CSS rules that enforce minimums and/or maximums for widths and heights, among many other things.

Initially, you can get pretty far just using the WidthStyle and HeightStyle with TWebPanel or TWebHTMLDiv components to get what you're after. Sometimes a little more effort is required to get certain layouts to work the way you want, as will always be the case.

And in addition to placement, there is the concept of overflow - what happens when content doesn't fit within a component. Like when you have more text than can be displayed in a fixed-size TWebMemo. Typically when this happens, a scrollbar appears automatically to allow the user to scroll around to see the extra content. But there are other options, such as just displaying the content anyway, overtop of whatever is adjacent to the container, or not displaying the extra content at all - clipping it. Or if the component is set to expand (using the Auto option), sometimes that's great until it pushes something else off of the page.

Lots of things can happen, and you have lots of options for dealing with them. How much effort is required is not necessarily greater for a better user experience, but that depends entirely on what kinds of things you want to accommodate.