Jump to content
DavidRM

TW3ListBox - Center text of items vertically

Recommended Posts

I'm trying to center the text of TW3ListBox items vertically. Currently, the text is always at the top of the item.

I have created a simple "item class" that I use to establish the style:

  TMonoSpaceListBoxLabel = class(TW3CustomControl)
  end;

...

.TMonoSpaceListBoxLabel {
    font-family: Lucida Console;
	white-space: pre;
}

Here's what it looks like at runtime:

image.png.1bf8495e5f7aa4c368810cf9ea4f1303.png

I really want the text centered vertically but haven't had any luck.

Thanks!

-David

Share this post


Link to post
Share on other sites

The ListBox uses TW3ListBoxLabel as default ItemClass, which is the same as TW3Label. So the text should automatically be vertically centered.

If you use your own class, things are a bit harder as vertical centering is not easy in javascript. That's why TW3Label uses a separate content and uses special styles like this for it:

{ top: 50%; -BrowserAPI-transform: translate(0%, -50%); transform: translate(0%, -50%);}

Have a look at TW3Label to see what it requires. But I think that it'll be easier for you to inherit from TW3Label and just change the font.

Share this post


Link to post
Share on other sites

@IElite I'm not sure how generally useful my solution is. My needs are a bit specific. Maybe even odd. 😃

type
  TMonoSpaceListBoxLabel = class(TW3CustomControl)
  end;

  TMonoSpaceListBox = class(TW3ListBox)
  public
    procedure CalculateItemHeight;
    begin
      var aItem := ItemClass.Create(Content);
      try
        aItem.InnerText := ' ';
        ItemHeight := aItem.Height;
      finally
        aItem.Free;
      end;
    end;
  end;

CSS:

.TMonoSpaceListBoxLabel {
    font-family: Lucida Console;
	white-space: pre;
	padding: 2px;
}

 

TW3ListBox wants you to specify the ItemHeight. I want the ItemHeight to be based on the height of the text. So I added "CalculateItemHeight" to do that for me.

It was adding "padding: 2px;" to the CSS that solved my original problem. The text (which is single line) gets "centered" by the padding.

-David

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×