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
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.
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.
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);
}
}