Unplanned
Last Updated: 05 Mar 2021 11:37 by ADMIN
Michael
Created on: 05 Mar 2021 11:36
Category: TileLayout
Type: Bug Report
2
Tile Layout does not take layout offset into account when resizing - you cannot resize tiles in an offset tile layout in some css scenarios

When in a div with display:flex, I cannot resize the tiles to the right as I expect to - they stop resizing before I reach the end of the tile layout.

---

ADMIN EDIT

Here is a sample you can use to observe the issue - try resizing the tiles and change the size of the layout offset. For cleanest results do this in a blank app that has absolutely no other styles (so no other layout is in play).

A short gif is attached at the end of this post that shows the problem.

<TelerikNumericTextBox @bind-Value="@width" Step="20" Min="0" Max="800"></TelerikNumericTextBox>
@code{
    int width { get; set; } = 200;
}
<div style="display:flex; flex-direction: row;">
    <div style="width: @(width)px; background: yellow;">
        some content on the left. When this is here, resizing tiles cannot use the full width of the tile layout
        - it stops short with the offset by this element due to the flex layout.
        Change the width of this element to see the effect - as you increase you will stop being
        able to resize 1column tiles at all. If you decrease, eventually you will be.
    </div>
    <div style="position: relative; display: block;"> @* THE WORKAROUND - REMOVE TO SEE THE PROBLEM *@
        <TelerikTileLayout ColumnWidth="200px"
                           RowHeight="150px"
                           Width="700px"
                           Columns="3"
                           Resizable="true">
            <TileLayoutItems>
                <TileLayoutItem HeaderText="Panel 1">
                    <Content>Regular sized first panel.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 2">
                    <Content>You can put components in the tiles too.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 3" RowSpan="3">
                    <Content>This tile is three rows tall.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
                    <Content>This tile is two rows tall and two columns wide</Content>
                </TileLayoutItem>
            </TileLayoutItems>
        </TelerikTileLayout>
    </div>
</div>

---

0 comments