1

So on my current project we've run into a particularly pernicious issue in the last couple weeks: Telerik RadWindow styles are no longer rendering properly. There seems to be some extra space around the border, the window icon is sitting flush at the top left, and the title bar buttons exist, but their icons are invisible. We're experiencing the exact same issues with RadAlert and RadWindow, alike. My teammates are also using Firefox and IE, and they've been having the exact same issue.

However: this problem isn't exhibited on all pages. Whether RadWindows look fine on a given page is always consistent for that page. Earlier I had noticed that where the window appears correctly, Chrome was downloading a fresh stylesheet each time, although disabling caching didn't change anything.

I noticed that the URL used for the buggy stylesheet is different from the normal one. I broke down the query strings for comparison, and the _TSM_CombinedScripts_ parameter gives different public key tokens. They're actually identical at the beginning, but by the end they're completely different.

normal:

d=d_7ijIXc06Eqg7xyrMT_AE_WxZL3XaVJz_VwsvOdK_1ssgHIAGoqaJzPVn-aFQFJVakZqv0a6M6IUW8lKaDBl-g9FohhCb-0KC2Mu14d6L4y47PrZb-wQiVUGqaxwCy7qcc2Dw2
t=635823632443834005
compress=1
_TSM_CombinedScripts_=
    ;;Telerik.Web.UI, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:cd668efa-682a-4e93-b784-26f0724f247c:92753c09:ed2942d4:580b2269:8cee9284:a3b7d93f:9e1572d6:aac1aeb7:1c2121e:4d471440:c86a4a06:45085116
    ;Telerik.Web.UI.Skins, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:a1fec5ec-d336-48a8-850e-06eaadf10400:62641802:f82ffad1:9db7724d:fa319bc5:226a649d:51352d27:8b77daa8:976fe3c:f144572

buggy:

d=d_7ijIXc06Eqg7xyrMT_AE_WxZL3XaVJz_VwsvOdK_1ssgHIAGoqaJzPVn-aFQFJVakZqv0a6M6IUW8lKaDBl-g9FohhCb-0KC2Mu14d6L4y47PrZb-wQiVUGqaxwCy7qcc2Dw2
t=635823632443834005
compress=1
_TSM_CombinedScripts_=
    ;;Telerik.Web.UI, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:cd668efa-682a-4e93-b784-26f0724f247c:92753c09:ed2942d4:580b2269:1c2121e:9e1572d6:45085116
    ;Telerik.Web.UI.Skins, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:a1fec5ec-d336-48a8-850e-06eaadf10400:62641802:f82ffad1:9db7724d:8b77daa8:226a649d

all kinds of jacked up

As for the actual bug, I did a little inspecting, an I found that the stylesheet actually overrides its own styles. I ran the stylesheet returned by Telerik.UI.Webresource.axd through a formatter, and line 216 defines a couple rules:

.RadWindow .rwCloseButton {
    background-position: -90px 0
}

.RadWindow .rwCloseButton:hover {
    background-position: -90px -21px
}

Then on line 4634 it overrides them. The buggy stylesheet has about 2600 extra lines overall. Strangely enough, these new rules apply the regular close button style to hovered close buttons in inactive windows as well.

.RadWindow .rwCloseButton,
.RadWindow.rwInactiveWindow .rwCloseButton:hover {
    background-position: -1px -762px
}

.RadWindow .rwCloseButton:hover {
    background-position: -21px -762px
}

On pages where windows appear correctly, only the first two rules are applied, and the second set of rules never makes an appearance. I just don't understand how it puts together the styles or why it's overriding itself.

As far as I can tell, none of the references have been changed. Nothing's been upgraded, the web.config hasn't changed. We're seeing the same issue both in our local environments and on our dev box.

Matt A
  • 43
  • 1
  • 7
  • Are you using a declared skin? eg. Skin="Metro"? – Seano666 Dec 02 '16 at 20:51
  • We have a couple RadAjaxLoadingPanels with Skin attributes on them, but other than that, no. Our RadWindowManager in our master page doesn't have one. – Matt A Dec 02 '16 at 22:10
  • Actually, after checking the Web.config, we did have one declared in appSettings. After removing it, though, I still see the same behavior, just with the default skin. – Matt A Dec 02 '16 at 22:25
  • I was going to say, it looks like maybe two different skins are fighting each other trying to style the RadWindow. – Seano666 Dec 03 '16 at 00:27
  • Try adding a skin to the RadWindowlike Metro, then inspect the window CSS, the rules not containing the "RadGrid_Metro" class are the offending ones. – Seano666 Dec 03 '16 at 01:06
  • I just tried that now, but all I ended up with was a second set of buggy rules, but with .RadWindow_Metro prefixed to each selector. Furthermore, if I undo our temporary fix (adding RenderMode="Lightweight" to all RadWindows), the buggy rules go away. If I put RenderMode back, they come back! At least I have something reproducible, even if I don't know what it means yet. – Matt A Dec 05 '16 at 15:54

1 Answers1

0

Either removing RenderMode="Lightweight" from all RadWindows or making sure all RadWindows have it fixes the problem.

Turns out the problem was that one of our team members added some RadWindows with RenderMode="Lightweight" to a few pages. Presumably, the second stylesheet that was loaded was actually for lightweight mode. This would be why the docs tell you not to mix render modes.

Matt A
  • 43
  • 1
  • 7