I've got a panel and a TWebLabel that has 3 lines of text in it (for the given font size).
It looks fine in the IDE, but at run-time, it's just one long single line that goes off the right margin.
It has hard returns in it, and it does not matter if I check the Word-wrap property or not.
I don't know if this is "as-designed" or a bug or just a quirk of working with HTML, but I don't like it. The whole reason for having a WYSIWYG designer is so it looks the same at run-time. This control does not adhere to that principle.
If we want some nicely formatted text in a bounded area that word-wraps nicely, but does not go the entire width of the space, what other options are there?
(I don't think it looks good to have lines of text that are jammed up against left and right borders, and most controls don't give you any way to adjust that. So in VCL, I use a multi-line label that fills up the area I want, and has the Align property set to None. If I set it to Client, then the left side sits right on the left border of the control, and there's ragged right text (unless there happens to be an "justified" alignment for the text in that control, which isn't common).
I think it is working as designed, but there are many things that can interfere with that design. And this is TMS WEB Core - we always have numerous options for this kind of thing. And a TWebLabel, while seemingly innocent enough, brings up all kinds of issues if you're not careful.
First, for it to wrap, it has to have a fixed (aka absolute or otherwise limited) width, or it will just keep going, as you've noticed. If the WidthStyle is set to "auto", well, it will just automatically fit the width of the text. Perhaps not what you want.
Second, HTML doesn't really pay much attention to line breaks much of the time. A TWebMemo might be a better choice here. When you say "hard return", what do you mean? HTML needs a <br /> tag for example, but depending on how the text is getting there, this kind of tag may not survive the journey from IDE to page. Not the fault of the IDE necessarily, just mixing different things. For example, you might get different results if you're assigning a value to the "Caption" property of TWebLabel, which strips out all the HTML, vs. the HTML property, which passes it through.
1 Like
Part of the reason for all this is because everything on the page is potentially dynamic, so there has to essentially be a set of rules that govern the behavior to support such things. You can set everything to be "absolute" and then nothing is dynamic, or "auto" and then everything is dynamic, or some combination in between. Here's something I'm working on right now that uses TWebLabels and the "wordwrap" property (the text beside the buttons) - the wrapping does work, but you have to be sure to set the boundaries for when it wraps.
I just assigned the text by opening the caption editor and entering the text in the box that comes up. I like that a lot more than typing into a 1" wide field that doesn't scroll worth a crap (in the Object Inspector).
Long static strings in the UI have always been hard to do in Delphi. They added a TStaticText component while back, but it has its quirks as well. I don't really like having to write a bunch of string constants in the code and then assign them to UI elements when they are purely a design-time thing anyway.
I'll play around with some of those properties and see if that helps. I might also try using a TWebMemo instead, but I'd like some padding around the text.
Yes, the properties editor in the Object Inspector is probably my #1 source of frustration in everything to do with TMS WEB Core - and it isn't even a TMS WEB Core thing. I've even toyed with Object Inspectory-style UIs in a few blog posts now, and it isn't all that hard to improve upon, but of course we don't have any ability to change the Object Inspector source code.
For really long text, I tend to just assign it programmatically, so then the text is in the regular IDE editor. But even there, things like linebreaks are a nuisance. They (Embarcadero) seemed to get it right with SQL, but not so much with anything else for some reason. The HTML editor is perhaps the one most in need of improvement, though. I've not had a chance to use Delphi 11 so maybe this has all been overhauled? One can hope.
As far as padding, this is also something that can be adjusted, along with margins and the rest of it. TWebEdit in particular benefits from a bit of padding. Are you using Bootstrap in your project? That makes things a lot quicker. You can just add "m-1" or "px-2" or something like that to the ElementClassName property to add padding and margins to an element.
For example, in the above animation, the labels to the right of the logout icons have this ElementClassName property:
ps-2 pe-5 pb-1
This adds a bit of padding at the Start to give a gap after the icon, then a lot of padding at the End to compensate for the vertical scrollbar width, and then a bit of padding at the Bottom, so that the text is more aligned with the icon arrows.
Sorry, declarative languages drive me nuts. They require too much memorization of tiny details. It's probably why I hate CSS. For visual design, I want to use a mouse and see the results on the screen. I'm not keen on having to do the IDE's work figuring out which of those little twerky bits of gibberish do what I want on-screen. Not my job. If I wanted to do that kind of stuff, I'd stick to writing everything in PostScript.
Pffft. PostScript. Spoiled! I'm sure some of us remember building interfaces where we had to PEEK and POKE values that were mapped to PIXELS on the screen. And we only had 16 colors to work with, at that.
Kidding aside, this is very much a diminishing returns situation. Easy to get something on the page, but the finer points take a bit of effort. No different than the VCL, just that for everyone one optional attribute there, you've got at least 500 optional attributes here. I like this place much better. But not because it's easy.
(Depending on how you count them, there is something like 520 CSS properties that can be applied to nearly every element on the page)
Without knowing your control property settings, what kind of linebreaks you have in the text, what possible container control you use and how it can affect this, it is very hard to say anything useful about this.
Maybe just show an example that works? There are so many variables, and I don't know what's relevant and what's not. It's always a Good Idea to start with something you know works. Starting with something that does not work wastes a lot of time for everybody. This is why code examples that show more than simply how to write a method calls that compile without any compiler issues are quite valuable.
I've got a TWebLabel in a panel that has room for three lines of text that are about 3" wide (it's for a mobile device). It just introduces what's below it. At one point, it showed up as 3 lines withing the boundaries of the TWebLabel that I set (fixed width and height). Then it stopped, and is just showing everythign on one big long line that runs off the page at the right. I don't know what I did to make that change, or why it worked originally and stopped.
I've got another form where that happened, and after some unsuccessful fiddling, I just chopped it into a few lines and put each one into separate one-line labels stacked upon each other, just to avoid wasting time and make it look the way I wanted it to look.