This is a migrated thread and some comments may be shown as answers.

resetAutoPostBackTile changes TileList height

2 Answers 15 Views
TileList
This is a migrated thread and some comments may be shown as answers.
david
Top achievements
Rank 1
david asked on 07 Jul 2015, 05:49 PM

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

Sort by
0
Accepted
Ianko
Telerik team
answered on 10 Jul 2015, 02:29 PM
Hello David,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
david
Top achievements
Rank 1
answered on 10 Jul 2015, 02:35 PM
that fixes the problem, thank you
Tags
TileList
Asked by
david
Top achievements
Rank 1
Answers by
Ianko
Telerik team
david
Top achievements
Rank 1
Share this question
or