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>---
When using my own buttons in the header template, and I have Reorderable=true, the tile layout consumes mouse events and clicks on my buttons don't always work. I would like to have the tile layout provide command buttons that can work in this scenario that let me handle their clicks reliably.
The functionality I am after is closing an minimizing tiles, so built-in actions for that like with the window would be nice. Perhaps tile items could get a Visible parameter like the grid columns and that could also go in their state.
Goto demo page
https://demos.telerik.com/blazor-ui/tilelayout/overview
Try to change tile's order or size.
Nothings happened.