Rad Window height increasing in Chrome

[golddog]

Weird situation.  We have two RadTreeViews, one for "available" critieria and one for "selected".  As users pulls a node from "available" to "selected", we open a RadWindow to let them specify the settings for that criteria (example: pull over the "user name" node, we pop a window to let them select equals/starts with/contains and type in a value).

In Chrome, each time the window is dragged over, the height increases by exactly 39 px.  Height doesn't change in IE9, but it doesn't seem to autosize to what I'd expect either--it picks 300px for reasons which escape me.

In the page containing our trees, here's how we define the RadWindow:

<telerik:RadWindow ID="CriteriaModal" runat="server" Modal="true" AutoSize="true" AutoSizeBehaviors="Height"
    VisibleStatusbar="false" ShowContentDuringLoad="false" Width="600px" Behaviors="Resize, Close, Move"
    OnClientClose="adHocCriteria.editNodeReturnHandler" RestrictionZoneID="radWindowZone">
</telerik:RadWindow>

and when the drag happens, here's how we open it:

adHocCriteria.editNode = function adHocCriteria_editNode(node, logical, logicLocked) {
    if (logicLocked)
        logical = logical + '_LOCKED';

    // VALUE == FieldLabel \b FieldID \b Operator \b Value
    var paramValue = 'fieldId=' + encodeURI(logical + '\b') + node.get_value();

    adHocCriteria._editNode = node;

    var modalDialog = adHocCriteria_GetModalWindow();
    alert('showing modal, height is ' + modalDialog._height);

    modalDialog.setUrl(adHocCriteria_GetAdHocCriteriaDetailsModalUrl() + '?' + paramValue);
    modalDialog.show();
}

(I put the alert in just to see what the _height parameter is immediately upon referencing it.  In Chrome, it goes from 300 to 339 to 378..., even if we pull the same node over [i.e., we're displaying the exact same set of controls, which should calculate the same height]).

A bit of detail, if it's of interest: our modal content is a RadSplitter (horizontal) with three RadPanes.  The middle one has a table with a series of Panels in it.  Depending on the type of node that's dragged over, we make the appropriate Panel visible (one has text-type input, one has date controls, et cetera).

So there's a bit of dynamicness there, but pulling the same node over repeatedly means we're going to make the same Panel visible with the same controls, so height should be calculated the same.

I'm working on this as a low-priority project, trying to put together a sample in extra time for you guys; so, it might be a while until I can get that together.  At this point, just wondering if anything like this has been reported, and, if so, what I might focus on.

[Marin Bratanov]

Hello Scott,

Such behavior has not been reported and I am not sure what may be causing this. What I can advise at this point is that you examine this help article on autosizing issues and see if following the suggestions from it helps. It should at least for the autosizing height in IE, yet the origin for both behaviors can be the same.

Several other things you may try are: changing the autosize behaviors and removing the restriction zone (as it needs to be always larger than the RadWindow so this may also be causing an issue when your content is dynamic). Also, if you are using the Simple or Metro skins you may try with another one, as these two are a bit different than the rest.

Take your own time and if you are still unable to resolve this then send us a small project where we can inspect it.


All the best,
Marin
the Telerik team

[Jan Pfeffer]

Hey at Telerik

I have the exact same problem with the RadWindow under Google Chrome.
All opened windows are added an addiotional 39 px in height.

var

 

 

url = "<%= UrlController.Instance.NavigationUrl %>";

 

var oManager = GetRadWindowManager();

 

var newWindowName = "Navigation" + oManager.get_windows().length.toString();

 

var oNew = oManager.open(url, newWindowName);

oNew.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Close);

oNew.set_title(

 

"Navigation");

oNew.add_close(OnClientCloseNavigation);

oNew.set_destroyOnClose(

 

true);

oNew.set_autoSize =

 

false;

oNew.set_width(160);

oNew.set_height(145);

oNew.set_iconUrl(

 

"<%= UrlController.Instance.IkonNavigation %>");

oNew.Center();

I'm currently running version 2012.1.215.35 of Telerik and 21.0.1180.83 of Chrome.

Sincerly

Jan

[Marin Bratanov]

Hello Jan,

The height you set for the RadWindow is too small for the browser to display properly. All browsers (with the exception of IE) have a limitation on the height of an iframe in a table and the RadWindow's content is actually an iframe when an external page is loaded. That being said we have taken into account this browser limitation and the height of the RadWindow is limited in non-IE browsers.

You can reproduce the same issue with no complex controls at all:

<table style="height: 80px; border: 3px solid green">
    <tr style="height: 100%">
        <td style="height: 100%">
            <iframe style="border: 1px solid red; height: 100%" src=""></iframe>
        </td>
    </tr>
</table>

What I would suggest is that you do not set content with heights smaller than 150px, which means the total height of the RadWindow cannot be below 210px when the titlebar and statusbar are visible.

If you want to have a smaller RadWindow you could use its ContentTemplate and add the controls directly there, instead of using an external page.

Greetings,
Marin Bratanov
the Telerik team