resetAutoPostBackTile changes TileList height

3 posts, 1 answers
  1. david
    david avatar
    210 posts
    Member since:
    May 2007

    Posted 07 Jul 2015 Link to this post

    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. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 Jul 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. david
    david avatar
    210 posts
    Member since:
    May 2007

    Posted 10 Jul 2015 in reply to Ianko Link to this post

    that fixes the problem, thank you
Back to Top