FormDecorator with MultiPageView, DropDownList and Google Chrome

[Nick]

This is the scenario:

RadFormDecorator on a page with a MultiPage and DropDownList inside two different PageViews.
The default PageView renders fine - all the controls are nicely designed using the FormDecorator.

On the other hand, on the 2nd PageView the FormDecorator is not doing its thing and the DropDownList keeps the default style.

All the other controls work fine in both PageViews.

The problem occurs only in Google Chrome - IE and FF work as expected. This was tested in Multiple Chrome versions - problem persists.

Here is a sample code, nothing fancy:

<form id="form1" runat="server">
<telerik:RadScriptManager ID="ScriptManager" runat="server" AsyncPostBackTimeout="1000">
</telerik:RadScriptManager>
<telerik:RadFormDecorator ID="rfd" runat="server" Skin="Office2010Blue" DecoratedControls="All" />
<telerik:RadTabStrip ID="ts" runat="server" Skin="Office2007" MultiPageID="rp" CausesValidation="False"
    SelectedIndex="0" AutoPostBack="false">
    <Tabs>
        <telerik:RadTab Text="Customer Information" PageViewID="rvp1">
        </telerik:RadTab>
        <telerik:RadTab Text="Items" PageViewID="rvp2">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="rp" runat="server" SelectedIndex="0">
    <telerik:RadPageView ID="rvp1" runat="server" Selected="true">
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
    </telerik:RadPageView>
    <telerik:RadPageView ID="rvp2" runat="server">
        <asp:DropDownList ID="DropDownList2" runat="server" Width="100px">
        </asp:DropDownList>
    </telerik:RadPageView>
</telerik:RadMultiPage>
</form>

[Niko]

Hi Nick,

In webkit based browsers it is not trivial both as complexity and performance, to detect the appearance of hidden elements. Therefore in such cases manual calling to the decorate method of the RadFormDecorator should be done. In your case the best option would be to register for the OnClientTabSelected and call the decorate method. Here is a sample implementation:

function onTabSelected(tabStrip, args)
{
    var fd = getFD();
    fd.decorate(args.get_tab().get_pageView().get_element(), false);
}

function getFD() { return $find("<%= rfd.ClientID %>"); }

The second parameter in the decorate method prevents the FormDecorator from inserting additional CssClasses in the page, as they are already present.

Hope this helps.

Regards,
Niko
the Telerik team

[Nick]

Niko,

Thank you for your response.
This still does not explain two things - How come its working fine in FF?
Moreover, how come all the other controls are OK but the DropDownList. If you put a Textbox / Button in the 2nd PageView, the Decorator will do its thing - the DropDownList seems to be the only issue.

[Niko]

Hi Nick,

The Webkit based browsers have an issue with tracking the change of the visibility of the DOM elements. The FormDecorator does not decorate elements unless they are visible and tracks the invisible parents of such elements when they will appear and just then decorates them.
The decoration of buttons and inputs in webkit browsers is different from decorating select elements. Inputs and buttons there are decorated using purely CSS, which explains why on JS manipulations are necessary. In FF and the rest decorating in both inputs and buttons is done using JS as well.
To sum up, in webkit selects are decorated using JS and one should force decoration when showing/hiding them through JavaScript, while buttons and inputs are decorated purely through CSS, where no JS is needed and thus the previous case is irrelevant.

Hope my explanations are reasonable and understandable enough.

Greetings,
Niko
the Telerik team