I use the recommended code for setting tile postbacks (below) and I found that it changes the inline height Css to 185px. The two screenshots show the affect, it changes the horizontal layout and the tilelist height. Project code below, screenshots attached.
<%@ Page Language="C#" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="/App_Themes/Edway/Edway.css" type="text/css" />
<link rel="stylesheet" href="mypage.css" type="text/css" />
<style>
.left {
align-items: center;
}
.wideContent {
width: 290px;
height: 130px;
font-family: Segoe UI;
padding: 10px;
}
.squareContent {
width: 100px;
height: 120px;
padding: 10px;
}
.shortContent {
height: 105px;
}
.font14 {
font-size: 14px;
}
.font16 {
font-size: 16px;
}
.peekTemplateClass {
width: 120px;
height: 120px;
padding: 10px;
font-size: 13px;
line-height: 20px;
}
.feedback {
width: 120px;
height: 120px;
font-size: 13px;
line-height: 20px;
}
/* group heading tile appearance */
.groupHeadingTitle {
height: 120px;
width: 120px;
position: relative;
}
.innerTitle {
width: 120px;
height: 40px;
top: 50%;
margin-top: -20px;
position: absolute;
font-size: 17px;
line-height: 20px;
padding-left: 10px;
}
div.noHover.RadTile {
border-color: transparent;
}
/* change tile texts to better fit long names and show over the images */
.RadTile div.rtileBottomContent {
font-weight: bold;
width: auto;
max-width: 120px;
color: Black;
/* semi-transparent background like this will work in CSS3 compatible browsers */
background-color: rgba(255,255,255,0.5);
height: 20px;
line-height: 20px;
padding: 0 10px;
bottom: 10px;
}
</style>
<!-- remove this function and the layout of the tiles changes
<script type="text/javascript">
function resetAutoPostBackTile(sender, args) {
var tiles = sender.get_allTiles();
for (var i = 0; i < tiles.length; i++) {
//a default condition would be if the tile has NavigateUrl set
//you can use a custom one - e.g., the presence of a CSS class
if (tiles[i].get_navigateUrl()) {
tiles[i].set_autoPostBack(false);
}
}
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadTileList ID="RadTileList1" runat="server" TileRows="1" Skin="Bootstrap" AutoPostBack="true" OnClientLoad="resetAutoPostBackTile" CssClass="left" >
<Groups>
<telerik:TileGroup>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile1" runat="server" Width="120px" Height="120px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
<PeekTemplate>
<div class="squareContent font14">
See your complete gradebook
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile2" runat="server" Width="120px" Height="120px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
<PeekTemplate>
<div style="background-color: #f8b617" class="squareContent font14">
See help for your homepage
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="TextTileProfile" Name="TextTileProfile" runat="server" Width="120px" Height="120px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
<PeekTemplate>
<div style="background-color: #f37928" class="squareContent font14">
Update your password
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="tileLogout" runat="server" Width="120px" Height="120px" Text="Logout" BackColor="#03953f" AutoPostBack="true">
<PeekTemplate>
<div style="background-color: #03953f" class="squareContent font14">
Logout
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
<telerik:RadTileList ID="RadTileList2" runat="server" TileRows="1" Skin="Bootstrap" AutoPostBack="true" OnClientLoad="resetAutoPostBackTile" CssClass="left" >
<Groups>
<telerik:TileGroup>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile3" runat="server" Width="120px" Height="120px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
<PeekTemplate>
<div class="squareContent font14">
See your complete gradebook
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile4" runat="server" Width="120px" Height="120px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
<PeekTemplate>
<div style="background-color: #f8b617" class="squareContent font14">
See help for your homepage
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile5" Name="TextTileProfile" runat="server" Width="120px" Height="120px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
<PeekTemplate>
<div style="background-color: #f37928" class="squareContent font14">
Update your password
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile6" runat="server" Width="120px" Height="120px" Text="Logout" BackColor="#03953f" AutoPostBack="true">
<PeekTemplate>
<div style="background-color: #03953f" class="squareContent font14">
Logout
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
</form>
</body>
</html>
2 Answers, 1 is accepted
The described behavior has been already discussed in a support ticket sent to use (ID 951669). Please, let us continue the conversation there in order to keep the information flow more concrete.
As for anybody else, the matter described is related to CSS and custom stylization of the TileList. The removal of the client-side script leads to different look due to a side effect stemmed from initialization failure.
The CSS to achieve the desired look is this one:
div.RadTile.rtileSquare { height: 120px !important;}div.RadTileList { height: auto !important;} div.RadTileList .rtlistWrapper { width: auto !important; }Regards,
Ianko
Telerik
Rank 1