Description

During vertical resizing, a tile's size can get extremely large. Reproduced only in Firefox (tested with version 147). See the attached video.

Steps To Reproduce

1. Run this example: https://blazorrepl.telerik.com/QqkQPVbQ10VEaYKw23
2. Resize the San Francisco tile to span the whole first row.
3. Click on its bottom handle and drag down to resize it.
4. 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:

1. Reorder tiles 1 and 2.
2. Click (focus) tile 2, which is now the first one.
3. 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>

In my scenario, the TileLayout has only one column, so the user can only reorder the tiles vertically. For example: https://blazorrepl.telerik.com/mpYQGSbu17n4iUaE11.

Based on the current behavior, for example, to drag tile 1 under tile 2, you must drag the tile to one of the following zones to free up space on which you can drop the tile:

• After the middle on the right of the tile you want to drop over
• After the whole tile

The zones in question are marked in red here:

When the TileLayout has only one column, I think it would be more intuitive if one can drag a tile to the vertical middle of the tile you want to replace and then the space is freed up. The suggested zone is marked with green here:

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.

While your existing TileLayout seems to be striving for this it doesn't seem to function as intuitively, or perhaps it is supposed to but has bugs?  Ideally I'd like to have a layout component that mimics what I see in the Azure portal, however I realize from other feedback tickets you're not going to do that.  The ability to have gaps really makes the user experience better.  I understand things have to be 'touching' (eg I can't just place something off into the bottom right corner of the screen by itself) but being able to do something like you see in the attached gridstack_basic_demo_img1.jpg would be great.  

It seems easy to get into an odd state using the TileLayout, even creating gaps where I don't want them and I'm unable to fix it.  For example in telerik_tilelayout_img1.jpg you see your demo page, I have the "Bounce Rate" box with a gap above it and for whatever reason I can't even bring it UP to fill the gap (dragging it up the red arrow path and dropping it gets rejected and the box floats back to where it is in the img). 

I really want to use your TileLayout but I think using it as-is would really frustrate my userbase.  Do you have plans to improve it's functionality and overall user experience?

Thanks for your consideration

### Description

Add the option to constrain the RowSpan and ColSpan of individual tiles in the TileLayout.

### Specification (if feature)

Add options to the tiles such as MinColSpan, MaxColSpan, MinRowSpan, and MaxRowSpan.

Currently, only `RowSpan` `ColSpan` and `HeaderText` parameters cause a `TileLayout` to rerender when changed.  I use `Class` changes for a lot of styling (in particular it's useful for hiding/showing a `TileLayoutItem` without losing its position in the layout) and have to manually detect and call `StateHasChanged()` when the `Class` parameter changes on `TileLayoutItem`.

Please allow dynamic change of the TileLayoutItem Class property.

I want to prevent an individual TileLayoutItem from being resized or reordered when Reorderable and Resizable are enabled on component level.

===

ADMIN EDIT:

Here is a possible workaround - prevent pointer events for the tile that should not be resized and reordered. Note that users may still be able to push the "disabled" tile to a new place by reordering the other tiles.

<TelerikTileLayout Columns="3"
                   RowHeight="150px"
                   Resizable="true"
                   Reorderable="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" Class="disabled-tile">
            <Content>No resizing and no reordering</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>

<style>
    .disabled-tile {
        pointer-events: none;
    }
</style>

Hi,

We would like to request a feature wherein we can drag the tile on empty spaces and triggers the reordering of tiles. To make it some kind of docking feature on the TileLayout.

So far the workaround we see to put the tiles on those empty spaces is when you drag the tile in between tiles (between conversion rate and page views tiles) and if you drag it again on the same row it will reorder fine. Another one is to drag the tile on another tile (drag into most viewed pages tile) it will reorder the dragged tile on that empty space beside the existing tile.

https://demos.telerik.com/blazor-ui/tilelayout/overview

Here's a sample of what we did:

Hi,

Is there a way we could drag the tile on those empty spaces in the tile layout? I've tried the samples in your page and it seems reorderable only reorders the tiles. Is it possible to put an option that we might be able to drag those tiles to the empty spaces instead of dragging them to another tile to switch places? See attached file as reference on what I meant.

In TelerikTileLayout the TileLayoutItem have the possibility to have have a HeaderText or even a HeaderTemplate, and behave as a TelerikCard, only without a footer.

Having the possibility to have a FooterTemplate would grant a better managment of the layout.