My page has 10 tiles (4 square, 4 wide and 2 custom sized), I need to arrange the 4 square one below another and in the next column 4 wide one below another, followed by 2 custom tiles in the next column (layout attached). I am not able to position the square tiles one below another, and I read few posts which says that 2 square tiles act as one wide. Is there a way I can achieve the desired layout as shown in the attachment, please let me know.
4 Answers, 1 is accepted
You can use standalone tiles so you can have custom dimensions and layout:http://demos.telerik.com/aspnet-ajax/tilelist/examples/standalonetiles/defaultcs.aspx. From a layout point of view the tiles are div elements with float: left and position: relative.
Here is a basic example of such a layout that you can use as base for creating your page (e.g., tweak it according to your preferences, extract the needed CSS into classes, duplicate it as many times as needed, etc.):
You can set the TileRows property to 3 yet while you use a TileList you will be constrained by the layout it must have. A TileList uses columns first, then rows, so 3x3 may not be possible and would depend on the way you use groups and the Rows/Height you set. Thus, you may need to switch to standalone tiles to create custom layouts.
On the provided images - the layout is correct for the provided settings and to achieve the custom layout you want I suggest avoiding a tilelist because this layout does not fit in its concept.
Regards, Marin Bratanov
Thank you Marin.
That does it for me.