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

Extra whitespace in TileLayoutItem

3 Answers 169 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 23 Mar 2021, 01:04 AM

I have 3 sections A, B and C. Each is a tilelayoutitem. I have to calculate the rowspan for each with a C# function. for example section A has 47 rows, B has 17 and C has 9. below is the snippet. when it renders there is a bunch of whitespace after the 47 rows in section A, a moderate about for the 17 rows in B and C shows up fine with only a little bit of whitespace. I don't know how to make each tilelayoutitem fit its content properly.  thanks

            @foreach (var item in Groups)
            {
                <TileLayoutItem HeaderText="@item" ColSpan="6" Class="tile-with-overflow" RowSpan="@CalculateRowSpan(@item)">
                    <Content>
                            <SaleDetail Group="@item" FormatDetails="@SalesFormatDetails"></SaleDetail>
                    </Content>
                </TileLayoutItem>
            }

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 24 Mar 2021, 06:05 PM

Hi Derek,

The tiles are not designed to fit their content, but the other way around - they create layout that the content should fit. If you are looking for containers that can take the size of their content, the Window component might be a good fit. If you don't set Height to it, the content will determine the height, like with any other HTML element.

I'm also attaching here a screenshot of the sample size calculation from the sample I made for you below. You will note that I have dramatically decreased not only the row/column size, but also the spacing which also counts towards the final size. The default spacings (gaps in the CSS terminology) are 16px in each direction so 47 rows will give you 46 gaps times 16px = 736px height from the gaps alone, and then also the size of the row too.

 

<TelerikTileLayout Columns="15"
                   ColumnWidth="10px"
                   RowHeight="5px"
                   RowSpacing="5px"
                   ColumnSpacing="5px"
                   Resizable="true"
                   Reorderable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="A" RowSpan="47" ColSpan="6">
            <Content>47 tall, 6 wide.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="B" RowSpan="17" ColSpan="6">
            <Content>17 tall, 6 wide.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="C" RowSpan="9" ColSpan="6">
            <Content>9 tall, 6 wide.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Bill
Top achievements
Rank 1
answered on 25 Mar 2021, 07:52 AM

How do I put an image in a TileLayouItem?

My ChartComponent is 925x480px.

I will load the saved .png file into the TileLayoutItem  and try different layouts.

Essentially, we need 2x2 with minimal whitespace gaps.

0
Marin Bratanov
Telerik team
answered on 25 Mar 2021, 08:16 AM

Hi Bill,

If you want the tile to fit an image with those dimensions, you need to set the appropriate ColSpan and RowSpan, according to the dimensions of the columns, rows and gaps you've provided to the component.

To reduce gaps, reduce the RowSpacing and ColumnSpacing parameters like in my example.

If you want the tile to be 2 columns wide and two rows tall, but accommodate content that is 925px this means that the ColSpan should be 2, RowSpan should be 2, and the ColumnWidth should be something like 460px, with RowHeight at least 240px (or equal to ColumnWidth if you want squares).

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
Derek
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Bill
Top achievements
Rank 1
Share this question
or