Flashing occurs when using Panel Bar with style-sheet overrides

[Matthew Erwin]

I am using an included stylesheet to override some of the CSS on the Web20 skin. However when expanding and collapsing items in the panel I am seeing the others that are expanded "flashing" briefly between the "unselected" color and the "selected" text color. I would expect that the CSS for the other selected items in the panel would not be touched just b/c another part of the panel is being collapsed.


For an example just add a panel bar with 5-6 sections in it and allow multiple panels to be open simultaneously. Then include the following into the page:

.RadPanelBar_Web20 .rpExpanded .rpText
{
    font-weight:bold !important;
    color: #F58110 !important;
}

When expanding/collapsing other sections you will see all other sections that are expanded flash between the unexpanded color of text and the expanded color of text. I have been using FireFox 2.0 for this development --- the problem seems to be specific to Firefox...the control operated as expected in IE.

[Matthew Erwin]

Same thing also occurs for any other classes over-ridden here -- if you override the image that is shown for expanded versus unexpanded the expanded images will also flash.

[Alex Gyoshev]

Hello Matthew Erwin,

Unfortunately, we weren't able to reproduce the problem that you describe. Could you please open a support ticket and send a sample project that reproduces the case? Thanks in advance.

Greetings,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Matthew Erwin]

Further investigation on my end shows that this will only occur if the PanelBar items are registered for a server-side ItemClick event and the PanelBar is ajax-enabled using the RadAjaxManager.

The effect is identical when the page is initially  loaded b/c FireFox is rendering the items before applying the final style...probably a FF idiosyncracy. I'm going to find out if I can eliminate the need for an update panel here to eliminate this problem.

You should be able to reproduce this if you have the PanelBar in an update panel of some sort and fire ItemClick events that expand the nodes in the panel bar via a call to the server.

[Simon]

Hi Matthew Erwin,

I tried to reproduce the problem as you described but everything worked normally.

I have attached the test page to this message. Could you modify it appropriately, so that the problem starts manifesting and send it back to me in order to investigate it?

All the best,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Matthew Erwin]

Just add a Click event to one of those RadPanelItem elements and include that RadPanel in an RadAjaxSettings controller...problem appears to be a browser issue that you can't really do anything about. It renders with the stylesheet included and then modifies it with your !important settings.

I will try to put together an example when I get a chance. I don't think there is anything you guys can do about it. I suppose I would always have the option of creating a completely new skin or trying to find a way to set those specific classes on the object so that the default class names are not used.

[Simon]

Hi Matthew Erwin,

I tried to reproduce the issue as you described and everything worked normally.

Once again, it will help a lot if you assemble a sample project and send it to us so that we can investigate it.

Regards,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Matthew Erwin]

This is a browser issue -- appears that in some cases it shows things before applying all stylesheets. This is worse in FF3 where rendering occurs before the stylesheet has fully loaded. Thanks again for looking into this - I got rid of the flashing problem by eliminating partial postbacks on the RadPanel and opting instead for standard WCF calls via JS.