This is a migrated thread and some comments may be shown as answers.

Bad display when header content is right aligned

8 Answers 193 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
Patrick asked on 20 May 2020, 06:23 AM

Hello,

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

8 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 20 May 2020, 06:31 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 20 May 2020, 07:11 AM

Hi Marin,

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

0
Marin Bratanov
Telerik team
answered on 20 May 2020, 07:17 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 20 May 2020, 07:25 AM

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>
0
Marin Bratanov
Telerik team
answered on 20 May 2020, 07:39 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 20 May 2020, 07:47 AM

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.

0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 20 May 2020, 07:51 AM
It would be much more simpler, if you add HeaderTextAlignment and TextAlignment properties to the Grid.
0
Marin Bratanov
Telerik team
answered on 20 May 2020, 08:04 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Marin Bratanov
Telerik team
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or