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

Easing problem when tile height increased

5 Answers 47 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Bryan McFarland
Top achievements
Rank 1
Bryan McFarland asked on 15 Dec 2013, 12:16 AM
Hi Guys,

When I set the Height property of a tile, part of the content showed on the tile before easing animation occurred.  And when easing animation happened, the content did not completely scroll off.

I understand that the Shape property is important for proper tile easing to occur, but shouldn't there be a way for the height of the tile to be increased and easing to work properly?

Also, is there anyway for a tile to automatically increase in height to handle whatever content I place in the tile?

Bryan

5 Answers, 1 is accepted

Sort by
0
Stanimir
Telerik team
answered on 17 Dec 2013, 02:18 PM
Hello Bryan,

Could you provide me with a sample code declaration of a tile, which I can use to reproduce the problem locally? I will debug it and provide you with a suitable solution.

Regards,
Stanimir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Bryan McFarland
Top achievements
Rank 1
answered on 17 Dec 2013, 02:42 PM

Hi Guys,


I didn't do anything special.  Just create a RadTile whose content is longer than the height of the standard tile height, then set the height of the radtile to something that will accommodate the height of the content.  Also, make sure easing is used, not Fade, but animation.



Bryan

:-)

0
Stanimir
Telerik team
answered on 17 Dec 2013, 03:34 PM
Hello Bryan,

Check the following code and see if it will be of any help for you:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        //<![CDATA[
        Sys.Application.add_load(function () {
            OverwriteTileAnimation($find("<%=tile1.ClientID%>"));
        });
 
        function OverwriteTileAnimation(tile) {
            var element = tile.get_element(),
                $ = $telerik.$,
                //400 is the height of the content
                contentHeight = 400;
                     
            $(".rtileContent", element).height(contentHeight + "px");
            $.extend(tile.get_peekAnimationManager().get_animationStrategy(), {
                show: function () {
                    this.$element.stop(true).animate({ top: -contentHeight + "px" },
                    this.options.duration,
                    this.options.easing,
                    this._showAnimationEndHnadler);
                }
            });
        }
        //]]>
    </script>
</telerik:RadCodeBlock>
<telerik:RadContentTemplateTile ID="tile1" runat="server" Height="400">
    <PeekTemplateSettings Animation="Slide" Easing="easeInCubic" HidePeekTemplateOnMouseOut="true" ShowInterval="2000" ShowPeekTemplateOnMouseOver="true" />
    <ContentTemplate>
        <div style="height: 400px; background-color: red;">content</div>
    </ContentTemplate>
    <PeekTemplate>
        <div style="height: 400px; background-color: green;">peek content</div>
    </PeekTemplate>
</telerik:RadContentTemplateTile>



Regards,
Stanimir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Bryan McFarland
Top achievements
Rank 1
answered on 17 Dec 2013, 03:52 PM

Hi Guys,


Thanks for the code.  I'll try that.  On a similar note, is there a way for a tile to "dynamically" expand its height to make sure the content is not cropped (cut off)? I have some tiles that will have 3 or 4 lines of content, while other tiles might have 20 lines of content.



Bryan



0
Stanimir
Telerik team
answered on 18 Dec 2013, 08:17 AM
Hello,

This time I will provide you with two approaches of how to achieve this behavior.
1. A modification of the code, which I provided in my previous post.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        //<![CDATA[
        Sys.Application.add_load(function () {
            OverwriteTileAnimation($find("<%=tile1.ClientID%>"));
        });
 
        function OverwriteTileAnimation(tile) {
            var element = tile.get_element(),
                $ = $telerik.$;
 
            $(".rtileContent:first", element).height("");
            $.extend(tile.get_peekAnimationManager().get_animationStrategy(), {
                show: function () {
                    this.$element.stop(true).animate({ top: -this.contentElement.offsetHeight + "px" },
                    this.options.duration,
                    this.options.easing,
                    this._showAnimationEndHnadler);
                }
            });
        }
        //]]>
    </script>
</telerik:RadCodeBlock>
<telerik:RadContentTemplateTile ID="tile1" runat="server" Height="200">
    <PeekTemplateSettings Animation="Slide" Easing="easeInCubic" HidePeekTemplateOnMouseOut="true" ShowInterval="2000" ShowPeekTemplateOnMouseOver="true" />
    <ContentTemplate>
        <div style="background-color: red;line-height: 25px;">
            line 1
            <br/>
            line 2
            <br/>
            line 3
            <br/>
            line 4
            <br/>
            line 5
            <br/>
            line 6
            <br/>
            line 7
            <br/>
            line 8
            <br/>
            line 9
            <br/>
            line 10
            <br/>
            line 11
            <br/>
            line 12
            <br/>
            line 13
            <br/>
            line 14
            <br/>
            line 15
            <br/>
            line 16
            <br/>
            line 17
            <br/>
        </div>
    </ContentTemplate>
    <PeekTemplate>
        <div style="height: 400px; background-color: green;">peek content</div>
    </PeekTemplate>
</telerik:RadContentTemplateTile>

2. This approach can be used to target all the tiles on the page, without the need to apply the OverwriteTileAnimation function to each one.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <style type="text/css">
        .rtileContent {
            height: auto !important;
        }
    </style>
    <script type="text/javascript">
        //<![CDATA[
        $telerik.$.extend(Telerik.Web.UI.Tile.SlideAnimationStrategy.prototype, {
            show: function () {
                this.$element.stop(true).animate({ top: -this.contentElement.offsetHeight + "px" },
                this.options.duration,
                this.options.easing,
                this._showAnimationEndHnadler);
            }
        });
        //]]>
    </script>
</telerik:RadCodeBlock>
<telerik:RadContentTemplateTile ID="tile1" runat="server" Height="200">
    <PeekTemplateSettings Animation="Slide" Easing="easeInCubic" HidePeekTemplateOnMouseOut="true" ShowInterval="2000" ShowPeekTemplateOnMouseOver="true" />
    <ContentTemplate>
        <div style="background-color: red;line-height: 25px;">
            line 1
            <br/>
            line 2
            <br/>
            line 3
            <br/>
            line 4
            <br/>
            line 5
            <br/>
            line 6
            <br/>
            line 7
            <br/>
            line 8
            <br/>
            line 9
            <br/>
            line 10
            <br/>
            line 11
            <br/>
            line 12
            <br/>
            line 13
            <br/>
            line 14
            <br/>
            line 15
            <br/>
            line 16
            <br/>
            line 17
            <br/>
        </div>
    </ContentTemplate>
    <PeekTemplate>
        <div style="height: 400px; background-color: green;">peek content</div>
    </PeekTemplate>
</telerik:RadContentTemplateTile>



Regards,
Stanimir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
TileList
Asked by
Bryan McFarland
Top achievements
Rank 1
Answers by
Stanimir
Telerik team
Bryan McFarland
Top achievements
Rank 1
Share this question
or