Timeline Horizontal Line Position

Radzen Blazor Studio
1

Hello, not sure if this is a bug but, I'm unable to figure out how to center the Line across all point content. I've tried changing LinePosition and other style properties but have been unsuccessful. Am I missing something?

I've replicated the same using your online component which seems to render the same issue:

image
image2026×572 46.4 KB

Here's my sample code if you wish to replicate:

    <RadzenTimeline Orientation="@orientation" LinePosition="@position" Reverse="@reverse" class="rz-m-4">
        <Items>
            <RadzenTimelineItem PointStyle="PointStyle.Success" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Engineering</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Drawings</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="check" />
                </PointContent>
                <ChildContent>
                    11/1/2025
                </ChildContent>
            </RadzenTimelineItem>

            <RadzenTimelineItem PointStyle="PointStyle.Success" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Material</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Fabrication</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="check" />
                </PointContent>
                <ChildContent>
                    11/10/2025
                </ChildContent>
            </RadzenTimelineItem>

            <RadzenTimelineItem PointStyle="PointStyle.Success" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Material</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Kitting</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="check" />
                </PointContent>
                <ChildContent>
                    11/20/2025
                </ChildContent>
            </RadzenTimelineItem>


            <RadzenTimelineItem PointStyle="PointStyle.Success" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Assembly</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Framing</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="check" />
                </PointContent>
                <ChildContent>
                    11/25/2025
                </ChildContent>
            </RadzenTimelineItem>

            <RadzenTimelineItem PointStyle="PointStyle.Success" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Assembly</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Electrical</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="check" />
                </PointContent>
                <ChildContent>
                    12/5/2025
                </ChildContent>
            </RadzenTimelineItem>

            <RadzenTimelineItem PointStyle="PointStyle.Base" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Assembly</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Test</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="schedule" />
                </PointContent>
                <ChildContent>
                    12/7/2025
                </ChildContent>
            </RadzenTimelineItem>


            <RadzenTimelineItem PointStyle="PointStyle.Base" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Shipping</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Pack Out</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="schedule" />
                </PointContent>
                <ChildContent>
                    12/8/2025
                </ChildContent>
            </RadzenTimelineItem> 

            <RadzenTimelineItem PointStyle="PointStyle.Base"  PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
                <LabelContent>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Shipping</RadzenText>
                    <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Shipped</RadzenText>
                </LabelContent>
                <PointContent>
                    <RadzenIcon Icon="schedule" />
                </PointContent>
                <ChildContent>
                    12/8/2025
                </ChildContent>
            </RadzenTimelineItem>                        

        </Items>
    </RadzenTimeline>
2

Hi @Ramses915,

The timeline uses the CSS flexbox layout to align its items. That's why in Horizontal mode you'd need to make sure the LabelContent and ChildContent have the same height in order to have the line properly aligned to the center. One way to achieve that is to wrap the contents in RadzenStack components of the same height:

<RadzenTimelineItem PointStyle="PointStyle.Base" PointSize="Radzen.PointSize.Medium" PointVariant="Radzen.Variant.Flat" PointShadow="0">
    <LabelContent>
        <RadzenStack JustifyContent="JustifyContent.End" Gap="0" style="height:50px;">
            <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Shipping</RadzenText>
            <RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">Pack Out</RadzenText>
        </RadzenStack>
    </LabelContent>
    <PointContent>
        <RadzenIcon Icon="schedule" />
    </PointContent>
    <ChildContent>
        <RadzenStack JustifyContent="JustifyContent.Start" Gap="0" style="height:50px;">
            12/8/2025
        </RadzenStack>
    </ChildContent>
</RadzenTimelineItem>
3

Adding RadzenStack fixed it nicely. Thanks!!!

1 Like