TabGroup tab too narrow for selected caption

VCL TMS VCL UI Pack
1

Hi,

I'm setting up tabGroups and the selected font is too wide for the width of the tab:

image

I'm using DefaultAppearance = FALSE and I copy the settings from an Office Toolbar Styler, which is set to this:

GroupAppearance.Background = clInfoBk
GroupAppearance.BorderColor = 10729644
GroupAppearance.Color = 4474440
GroupAppearance.ColorTo = clWhite
GroupAppearance.ColorMirror = clSilver
GroupAppearance.ColorMirrorTo = clWhite
GroupAppearance.Font.Charset = DEFAULT_CHARSET
GroupAppearance.Font.Color = clWindowText
GroupAppearance.Font.Height = -12
GroupAppearance.Font.Name = 'Segoe UI'
GroupAppearance.Font.Style =
GroupAppearance.Gradient = ggVertical
GroupAppearance.GradientMirror = ggVertical
GroupAppearance.TextColor = 4474440
GroupAppearance.CaptionAppearance.CaptionColor = clGray
GroupAppearance.PageAppearance.BorderColor = clGray
GroupAppearance.PageAppearance.Color = clWhite
GroupAppearance.PageAppearance.ColorTo = clWhite
GroupAppearance.PageAppearance.ColorMirror = clSilver
GroupAppearance.PageAppearance.ColorMirrorTo = clWhite
GroupAppearance.PageAppearance.Gradient = ggVertical
GroupAppearance.PageAppearance.GradientMirror = ggVertical
GroupAppearance.PageAppearance.ShadowColor = 12888726
GroupAppearance.PageAppearance.HighLightColor = 16644558
GroupAppearance.TabAppearance.BorderColor = clBtnFace
GroupAppearance.TabAppearance.BorderColorHot = clBlue
GroupAppearance.TabAppearance.BorderColorSelected = clBtnFace
GroupAppearance.TabAppearance.BorderColorSelectedHot = clNone
GroupAppearance.TabAppearance.BorderColorDisabled = clNone
GroupAppearance.TabAppearance.BorderColorDown = clNone
GroupAppearance.TabAppearance.Color = clBtnFace
GroupAppearance.TabAppearance.ColorTo = clWhite
GroupAppearance.TabAppearance.ColorSelected = clInfoBk
GroupAppearance.TabAppearance.ColorSelectedTo = clInfoBk
GroupAppearance.TabAppearance.ColorDisabled = clNone
GroupAppearance.TabAppearance.ColorDisabledTo = clNone
GroupAppearance.TabAppearance.ColorHot = clYellow
GroupAppearance.TabAppearance.ColorHotTo = clNone
GroupAppearance.TabAppearance.ColorMirror = clWhite
GroupAppearance.TabAppearance.ColorMirrorTo = clWhite
GroupAppearance.TabAppearance.ColorMirrorHot = clNone
GroupAppearance.TabAppearance.ColorMirrorHotTo = clNone
GroupAppearance.TabAppearance.ColorMirrorSelected = clWhite
GroupAppearance.TabAppearance.ColorMirrorSelectedTo = clWhite
GroupAppearance.TabAppearance.ColorMirrorDisabled = clNone
GroupAppearance.TabAppearance.ColorMirrorDisabledTo = clNone
GroupAppearance.TabAppearance.Font.Charset = DEFAULT_CHARSET
GroupAppearance.TabAppearance.Font.Color = clWindowText
GroupAppearance.TabAppearance.Font.Height = -12
GroupAppearance.TabAppearance.Font.Name = 'Segoe UI'
GroupAppearance.TabAppearance.Font.Style =
GroupAppearance.TabAppearance.Gradient = ggVertical
GroupAppearance.TabAppearance.GradientMirror = ggVertical
GroupAppearance.TabAppearance.GradientHot = ggVertical
GroupAppearance.TabAppearance.GradientMirrorHot = ggVertical
GroupAppearance.TabAppearance.GradientSelected = ggVertical
GroupAppearance.TabAppearance.GradientMirrorSelected = ggVertical
GroupAppearance.TabAppearance.GradientDisabled = ggVertical
GroupAppearance.TabAppearance.GradientMirrorDisabled = ggVertical
GroupAppearance.TabAppearance.TextColor = 4474440
GroupAppearance.TabAppearance.TextColorHot = 10223616
GroupAppearance.TabAppearance.TextColorSelected = 9333539
GroupAppearance.TabAppearance.TextColorDisabled = 6514281
GroupAppearance.TabAppearance.ShadowColor = 15255470
GroupAppearance.TabAppearance.HighLightColor = 16775871
GroupAppearance.TabAppearance.HighLightColorHot = 16643309
GroupAppearance.TabAppearance.HighLightColorSelected = 6540536
GroupAppearance.TabAppearance.HighLightColorSelectedHot = 12451839
GroupAppearance.TabAppearance.HighLightColorDown = 16776144
GroupAppearance.ToolBarAppearance.Color.Color = clWhite
GroupAppearance.ToolBarAppearance.Color.ColorTo = clBtnFace
GroupAppearance.ToolBarAppearance.Color.Direction = gdHorizontal
GroupAppearance.ToolBarAppearance.ColorHot.Color = clNone
GroupAppearance.ToolBarAppearance.ColorHot.ColorTo = clNone
GroupAppearance.ToolBarAppearance.ColorHot.Direction = gdHorizontal

How can I fix the width of the tab?

Delphi 10.3
Ribbon Tab Font is set to Segoe UI, 9pt
DesignTime 96ppi, runtime 120ppi (125% scaling)

Thanks

2

From your screenshot, this appears to be pager captions and not group captions?
I spent a considerable amount of time trying to reproduce this but could not.
Can you please isolate this and provide a sample source project with which we can reproduce this here?

3

Hi Bruno,

Yes, sorry "page captions".

Demo is attached. Click the repro button and it shows a couple of page tabs (for context if a user selects an object). Hover & select the page and the font is bold, and it wraps around.

I figure it's something I'm doing configuring the components (styler, advpager) but I cannot figure out which.

This is what I see:

image
image961×443 8.39 KB

(Delphi 10.3, display scale 125%)

Note that I've increased the tab height to 32 to accommodate the text, but usually run at 24px and the text still wraps but is cropped.

Thanks

Project185_RIBBON_DEMO.zip (178.4 KB)

4

It is related to the fact that here, the total width of the page tabs is larger than the width of the form and thus a resizing needs to happen to ensure all tabs are visible on the caption. The text of the tab can as such only render in the visible tab area and might be cut off.

5

Hi Bruno,

I don't think that's the case -- if you make the width of the form wide enough to accomodate all the tabs (at design time or run time), the problem is still there:

image
image1650×498 9.09 KB

Thanks

6

bump

Anyone able to help with this please? Stil not resolved.

7

It is holiday period, so things have slowed down. We'll try to pick this up as soon as possible.

8

Of course :smiley:

Happy holidays!

9

I reopened this case with the latest TMS VCL UI Pack release. Retested on 125% DPI, but could not see the issue.
Compiled test prooject is here

Project185_RIBBON_DEMO.zip (6.5 MB)

10

(post deleted by author)

11

Update:

I think I’ve spotted what’s causing the problem here - if I create tabgroups at design time the word wrap doesn’t happen. If I create the tabgroups in code (necessary for dynamically created pages) then the problem occurs. This is my code to create a tabgroup:

while Ribbon1.TabGroups.Count > 0 do
Ribbon1.TabGroups.Delete(0);
if tabGroupRange[1] > -1 then
begin
tabGroup := Ribbon1.TabGroups.Add;
aStyler := Ribbon1.ToolbarStyler as TAdvToolBarOfficeStyler;
tabGroup.DefaultAppearance := FALSE;
if assigned(aStyler) then
tabGroup.GroupAppearance.Assign(aStyler.GroupAppearance);
tabGroup.CaptionAlignment := taCenter;
tabGroup.TabIndexStart := tabGroupRange[0];
tabGroup.TabIndexEnd := tabGroupRange[1];
end;

(tabGroupRange is an array of integer that I’ve pre-calculated)

Can you spot a problem with any of that?