Bad display when header content is right aligned

[Patrick]

Hello,

As you can see with the attached screenshot, the filter icon is over the header text in this case.

[Marin Bratanov]

Hi Patrick,

Could you try the workaround from this page: https://feedback.telerik.com/blazor/1462727-filter-icon-overlapping-the-column-header-text?

 

Regards,
Marin Bratanov
Progress Telerik

[Patrick]

Hi Marin,

I've tried, but the result is the same...

[Marin Bratanov]

Hello Patrick,

If you are customizing the header through a template, the grid can no longer take care of the styling so the template must ensure it does not overlap the filter icon. You can read details on that particular situation here: https://docs.telerik.com/blazor-ui/components/grid/templates#header-template

 

Regards,
Marin Bratanov
Progress Telerik

[Patrick]

Hi Marin,

Is there a way to define a right aligned header without a template?

The column is defined as:

 

<GridColumn Field="Duration"
      Width="120px">
  <HeaderTemplate>
    <div style="text-align: right">
      @Text("RequestsLog.Header.Duration")
    </div>
  </HeaderTemplate>
  <Template>
    <div style="text-align: right">
      @((context as RequestLogEntry).Duration.TotalMilliseconds.ToString("#,##0") + "ms")
    </div>
  </Template>
</GridColumn>

[Marin Bratanov]

Hi Patrick,

For your convenience I made two examples, and you can find them attached at the end of this post, together with screenshots of the results:

• one with header templates for specific columns
• one with CSS for all columns

Both use the workaround from the first page I linked and avoid the overlap through it.

 

Regards,
Marin Bratanov
Progress Telerik

[Patrick]

Hi Marin,

It works... unless the text of the column is too long (or the column is not wide enough. In this case, there is still an overlap.

[Patrick]

It would be much more simpler, if you add HeaderTextAlignment and TextAlignment properties to the Grid.

[Marin Bratanov]

Hi Patick,

You can Follow and Vote for that here: https://feedback.telerik.com/blazor/1431848-grid-column-header-and-content-alignment-horizontal-vertical. It will not fix the situation where the header text is too long for the column width, of course, as that would be basically the same CSS rule. At one point there is no solution for that when the column width becomes smaller than the word width.

 

Regards,
Marin Bratanov
Progress Telerik