THTMLTreeView caption alignment

VCL TMS VCL UI Pack
1

Cosmetic issue:

If you compare the THTMLTreeView caption alignment with the caption alignment of a standard TTreeView component, you will see that the THTMLTreeView's caption is aligned to the bottom whereas the TTreeView's caption is aligned in the middle. This is especially noticeable when a node is selected (the text is not vertically centered within the highlight).

Maybe I have a little OCD in me. ;)

2

Changed my mind... it is not just a cosmetic issue, it is more of a problem since a lowercase G (g) for example looks like a lowercase Q (q) because the tail (or leading?) is being cut off due to the alignment problem.

3

One more thing, if you underline a word, then the THTMLTreeView does not show the underline since, once again, it is being cut off due to the alignment.

4

We will need more details as we cannot reproduce this

5

Maybe it occurs when using the <IMG src> tag to pull from a VirtualImageList.  See first line under Cooling where you do not see the underline and see how lowercase G and Q appear:




Code snippet:
        pRRFolderList.Items.TreeNode := pTreeView.Items.AddChildObject(
          pFolder.TreeNode,
          Format('<IMG src="idx:%d">%s',
            [pRRFolderList.Items.IconIndex, pRRFolderList.Items.HtmlDescription]
            ),
          pRRFolderList.Items
          );

6

P.S. The code snippet didn't paste quite right... the Items property is actually indexed but the bracketed index did not paste for whatever reason.  And some of it came out in italics.  Odd.  Anyway, you get the idea.  I wish we could edit the post.

7

I decided to use StateImages instead of HTMLImages to avoid the use of the IMG tag.  Now it looks good.  I did try adding various HTML styles in an attempt to vertically align the text when using the IMG tag, but could not get it to work.  Using StateImages seems to get me what I want since all I was looking for is to add an use selectable icon next to the text and makes it a bit easier anyway.

8

Thank you for your feedback.

9

Text aligns to the used HTML image. Default it is bottom aligned. This can cause the needed height to be higher. Alternatively, on the IMG tag you can specify the text alignment to middle, i.e. < IMG ... align="middle" >Bruno Fierens2019-04-16 14:34:04