[Solved] Problem using Jquery UI Resizable in Tabstrip

[Junie]

Hello,

I have a problem using Jquery UI Resizable particularly the resizable textarea sample. Before I was using the version 2010.1 309 and my problem was that the resizable textarea will not load (or rather height, width, left, etc2x. was not properly set ) if the textarea is on the second or on the unselected tab. If the textarea is on the selected tab and the page loads it works fine. This I was able to fixed this through CSS:

.t-tabstrip .t-content {
    visibility: hidden;
    zoom: 1;
    left:-10000px;
    position:absolute;
    width: 0px;
    top:-10000px;
}

.t-tabstrip div.t-state-active {
    position: inherit;
    left: 0px;
    width: inherit;
    visibility: visible;
}

Now when I updated my Telerik to beta version of Q2 2010 my CSS solution will not work. It seems that the controls on the unselected tab are not rendered? Not sure on this one.

Note: I know that this is a beta but I need to update to this version because of some components and fixes that are not available in the Q1.

Many thanks in advance,
Junie

[Alex Gyoshev]

Hello Junie,

Unselected tabs are still rendered, so the problem might lie somewhere else. I suggest that you try a lazy initialization of the resizable textarea, like this:

    <script type="text/javascript">
        function onSelect(e) {
            $(e.item).closest('.t-tabstrip')
                .find('.t-content.t-state-active textarea')
                    .resizable({ handles: "se" });
        }
    </script>

    <%= Html.Telerik().TabStrip()
            .Name("TabStrip")
            .ClientEvents(events => events
                    .OnSelect("onSelect")
            )
    %>

This way it's more likely that the solution won't break with future releases, as it relies only on the onSelect event, rather on the specific styles that we use.

Sincerely yours,
Alex Gyoshev
the Telerik team

[Junie]

Hello Alex,

Thank you for the reply. I tried your solution but there is still a problem. The Resizable Textarea will only render if I will select the tab the second time around.
 If I will select the Tab for the first time, the textarea is still the same, the tags for having a resizable effects are not rendered. But if I will choose another tab and return to the Tab that supposed to have the resizable effect, then the tags are rendered correctly.

Any ideas on this?

Also I just noticed, if I will not used my CSS style. The DIV wrappers for hiding and showing the contents have an inline styling of style="display: none;", this style, if I am not mistaken, have some issues with other libraries/plugins that's why I used my CSS solution to fixed that one on the previous Telerik Version.

Again thank you for pointing this one out.

Regards,
Junie

[Alex Gyoshev]

Hi Junie,

My bad, the onSelect event can be canceled, and is therefore fired before the area is visible. Therefore, the onSelect function should be

    <script type="text/javascript">
        function onSelect(e) {
            setTimeout(function() {
                $(e.item).closest('.t-tabstrip')
                    .find('.t-content.t-state-active textarea')
                        .resizable({ handles: "se" });
            }, 10);
        }
    </script>

Does the display: none still bother you? The lazy initialization is usually preferable, because it boosts the performance of the page (i.e. controls that are not needed are not initialized)

Kind regards,
Alex Gyoshev
the Telerik team

[Junie]

Hello Alex,

This is Great! Problem is solved. I am marking this as answer.

Thanks a lot for the solution

Regards,
Junie