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

Text size within HeaderTemplate

4 Answers 124 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Iron
Veteran
Iron
Dean asked on 12 Jan 2021, 10:15 AM

Hi. I have a TelerikTileLayout with 6 tiles.  5 of them use simple <TileLayoutItem HeaderText="..."> for the headings, but for one I need to use <HeaderTemplate>.

The text I add in the <HeaderTemplate> is not rendered the same size as the text I specify with HeaderText. Presumably I need to either add a span with a particular class, or some other element?

 

Anyone got this working?

4 Answers, 1 is accepted

Sort by
0
Dean
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 12 Jan 2021, 11:04 AM
Issue can be seen on documentation: https://docs.telerik.com/blazor-ui/components/tilelayout/overview - attached
0
Marin Bratanov
Telerik team
answered on 12 Jan 2021, 02:28 PM

Hi Dean,

You can always inspect the built-in rendering and copy it to your custom template. The template is supposed to give you some more customization options and so it does not need to render the same way as the built-in Text feature.

For example:

<TelerikTileLayout ColumnWidth="200px"
                   RowHeight="150px"
                   Width="700px"
                   Columns="3"
                   Resizable="true"
                   Reorderable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Simple Header Text, no content">
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Simple Header Text, some content" ColSpan="2">
            <Content>You can put components in the tiles too.</Content>
        </TileLayoutItem>
        <TileLayoutItem ColSpan="2">
            <HeaderTemplate>
                <h5 class="k-card-title">Template that copies the built-in header text appearance</h5>
            </HeaderTemplate>
            <Content><p>As with other render fragments, you can put <strong>any</strong> content here</p></Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dean
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 12 Jan 2021, 03:25 PM

I can do this obviously but it doesn't seem very futureproof - do Telerik guarantee that all future versions will output the same HTML?

Could I suggest a feature request that by default, text appears the same size whether specified via HeaderText or HeaderTemplate?

0
Marin Bratanov
Telerik team
answered on 13 Jan 2021, 08:20 AM

Hi Dean,

While there are no plans at the moment to change the rendering, I could not guarantee that at some point in the future design systems and approaches used in the world won't change and that won't prompt a change in our rendering.

If you are looking for complete uniformity among all tiles you have two options:

  • copy the Telerik HTML into your templates (perhaps take it out in a component)
  • or always use the same header for all tiles - either the header text, or a custom template that you fully control

 

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TileLayout
Asked by
Dean
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Dean
Top achievements
Rank 1
Iron
Veteran
Iron
Marin Bratanov
Telerik team
Share this question
or