Description
During vertical resizing, a tile's size can get extremely large. Reproduced only in Firefox (tested with version 147). See the attached video.
Recording45.mp4
Steps To Reproduce
- Run this example: https://blazorrepl.telerik.com/QqkQPVbQ10VEaYKw23
- Resize the San Francisco tile to span the whole first row.
- Click on its bottom handle and drag down to resize it.
- Repeat step 3. and resize the tile making it higher or shorter a few times.
Actual Behavior
The tile will auto-resize to an unexpectedly large height.
Expected Behavior
The tile should resize predictably.
Browser
All, Firefox
Last working version of Telerik UI for Blazor (if regression)
No response
When the TileLayout keyboard navigation is enabled, users can tab from one tile to another. However, the tab order becomes incorrect after tile reordering. The tab order always matches the DOM element order, but it no longer matches the visual tile order in the UI.
For example:
- Reorder tiles 1 and 2.
- Click (focus) tile 2, which is now the first one.
- Tab. Instead of focusing tile 1 (which is now the second one), you will focus tile 3.
<TelerikTileLayout Columns="3"
RowHeight="150px"
Resizable="true"
Reorderable="true"
Navigable="true">
<TileLayoutItems>
<TileLayoutItem HeaderText="Tile 1">
<Content>Regular-sized first tile.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 2">
<Content>You can put components in the tiles too.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 3" RowSpan="3">
<Content>This tile is three rows tall.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 4" RowSpan="2" ColSpan="2">
<Content>This tile is two rows tall and two columns wide</Content>
</TileLayoutItem>
</TileLayoutItems>
</TelerikTileLayout>
The TileLayout should not render tabindex="0" on its tiles when Navigable="false".
Here is a test page with a workaround:
@inject IJSRuntime js
<p>Tab through the textboxes:</p>
<input />
<TelerikTileLayout Columns="2"
RowHeight="200px"
Resizable="false"
Reorderable="false"
Navigable="false"
Class="tilelayout-tabindex-remove">
<TileLayoutItems>
<TileLayoutItem HeaderText="Tile 1">
<Content>
<p>TileLayout Navigable="false" - will focus the inner textbox and will not focus the tiles.</p>
<input />
</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 2">
<Content>Tile 2 content.</Content>
</TileLayoutItem>
</TileLayoutItems>
</TelerikTileLayout>
<input />
<TelerikTileLayout Columns="2"
RowHeight="200px"
Resizable="false"
Reorderable="false"
Navigable="true">
<TileLayoutItems>
<TileLayoutItem HeaderText="Tile 1">
<Content>
<p>TileLayout Navigable="true" - will not focus the inner textbox and will focus the tiles. Focus the textbox with Enter when on the tile.</p>
<input />
</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 2">
<Content>Tile 2 content.</Content>
</TileLayoutItem>
</TileLayoutItems>
</TelerikTileLayout>
<input />
<script suppress-error="BL9992">
function removeTabindexFromTiles(selector) {
var tileLayout = document.querySelector(selector);
if (!tileLayout) {
return;
}
tileLayout.querySelectorAll(".k-tilelayout-item").forEach(el => {
el.removeAttribute("tabIndex");
});
}
</script>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(1); // ensure HTML is ready
await js.InvokeVoidAsync("removeTabindexFromTiles", ".tilelayout-tabindex-remove");
}
await base.OnAfterRenderAsync(firstRender);
}
}
We have a tile layout control within a tab page used on the whole page, we have resizing and moving enabled by dragging. Works well on desktop however on ios safari users are unable to scroll on the page, instead the page either does not move or tiles resize/move. If we disable only resizable or reorderable, the page is still not scrollable.
===
ADMIN EDIT
===
The only option for the time being is to disable resizing and reordering on mobile devices.
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>---
Hey all, I just tried the big upgrade (VS 2020, .Net 6). During it, I moved from Telerik UI for Blazor 2.30. I've invested a lot of time into using this component and it came out as a non-starter in this release. After digging for a couple hours, I just kept it simple (see code).
Any time you put an @ inside a TileLayoutItem, it breaks - just freezes everything. So I can't tell you where it is coming from, but I can tell you it doesn't work. To reproduce, see the following code, but basically use "@someObject" as the value of an attribute of TileLayoutItem or inside Content/HeaderTemplate.
My use case is more complicated and I'm waiting for a mid-December pre-release (see ticket 1543513), but here's a way to reproduce (I hope)
Example:
<TelerikTileLayout Reorderable="true"
Resizable="true"
>
<TileLayoutItems>
@foreach (string name in Names)
{
<TileLayoutItem Class="builder">
<Content>@name</Content>
</TileLayoutItem>
}
</TileLayoutItems>
</TelerikTileLayout>
@code {
public List<string> Names { get; set; } = new List<string> { "Sara", "Dan", "Frank", "Deuce" };
}
I want to dynamically change the TileLayout Reorderable parameter but the component does not react to that change. Dynamic change in the Resizable parameter is also not applied.
I am also trying to change the TileLayoutItem ColSpan dynamically - for example, when implementing it in a responsive layout (https://docs.telerik.com/blazor-ui/knowledge-base/tilelayout-responsive) but using a variable as the ColSpan value does nothing. The TileLayout does not react to a change in the ColSpan parameter either.
It would be nice if the TelerikTileLayout could be told to refresh itself or to refresh after some of its parameters is changed.
Goto demo page
https://demos.telerik.com/blazor-ui/tilelayout/overview
Try to change tile's order or size.
Nothings happened.