X for close has disappeared

[George]

I have two RadWindow's that I use to show data modally. They worked fine when I developed them a while ago, but now the X for the close is gone.  If I click the blank white area where the X should be the window closes just fine.  The title up fine everything still works fine, just no X.

 

<telerik:RadWindowManager ID="RadWindowManagerWindows" ShowContentDuringLoad="false"  ReloadOnShow="true" runat="server">
    <Windows>
        <telerik:RadWindow  Title="Selected Emails" Visible ="true"  ID="EmailWindow" runat="server" Modal="true"
            <ContentTemplate>
                     <asp:TextBox  CssClass="EmailBox" ID="EmailWindowList" runat="server"  TextMode="MultiLine" Wrap="true"/>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

 

How do I get the X back?

[Patrick | Technical Support Engineer, Senior]

Hi George,

After running your code, I was not able to reproduce the issue.  Are you using any extra CSS which might change the styling of the X?  

I've included a project using your implementation.

I look forward to your reply.

Regards,
Patrick
Telerik by Progress

[George]

No surprise you could not reproduce it.  My project includes everything that yours does but of course does have lots of other styles that it could be caught up in.  Not knowing what the X is in or what it is, makes it hard to know what the style could be doing. The X is there, it works and gives a "Close" tooltip.

I have styles that do not seem do effect it. I changed them all to colors to no effect. Regardless,  should not be a problem for a white window.

Is there any chance you could give me a style to target the X with a style to set its color. View source gives little clue what it going on.  What is the name of the X graphic and where would it be? Maybe it is missing.

In view source this what Telerik generates to open the window.

Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadWindow, {"_dockMode":true,"behaviors":4,"clientStateFieldID":"ctl00_MainContent_EmailWindow_ClientState","formID":"TheForm","iconUrl":"","minimizeIconUrl":"","modal":true,"name":"EmailWindow","reloadOnShow":true,"showContentDuringLoad":false,"skin":"MetroTouch","title":"Selected Emails"}, null, null, $get("ctl00_MainContent_EmailWindow"));
});

 

The email box uses this style:

.EmailBox {
    margin: 15px 0 0 10px;
    width: 95%;
    height: 95%;
}

 

I am using Bootstrap with its header in a white background.

Help with a solution would be appreciated.  I need this to work.

[Marin Bratanov]

Hello George,

What is the RenderMode your application uses?

If you use the Classic mode, the [x] button will be a background image and rules that affect background image positions may affect it.

In the Lightweight mode the [x] is a font icon applied to the :before pseudo element, so color, font-size, font-family, line-height and text-indent rules can easily affect it.

Those lists are not exhaustive, as there is a huge amount of CSS selectors that can do, essentially, the same thing.

What I can suggest at this point is that you follow this article on troubleshooting such problems: http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/skins-troubleshooting#incorrect-or-distorted-appearance.

Regards,

Marin Bratanov
Telerik by Progress

[George]

There is no render mode, I usually use light weight.  I tried Classic and Light Weight on the window with no better.  I tried everything on the troubleshooting page and nothing helped.  The X remains invisible with no clue looking at View Page Source.

The close button is there, the image is not showing.  If there was some class or id way to address the button I could use styles to do something about it.

I guess an alternative is to stop wasting the tons of money renewing Telerik and look for other products.  I spend far too much time on all the ridiculous problems I run into with the always "we can't reproduce it" or "we don't support it" answer.  I still cannot believe that rad combo boxes cannot be posted is by design.  I guess I could try Kendo, this seems to be going nowhere.  Guess the closing windows is not an option for my product.

[Marin Bratanov]

Hi George,

RadWindow renders its popup with JavaScript, so its markup is not available in the View Source, it is only available in the dev toolbar of the browser (easiest access is right click on the desired element > Inspect Element).

This will allow you to see the class it uses (.rwCloseButton).

There is a myriad of things that can go wrong in an application and a component is a mere building block. It can be acted upon by various sources, such as boilerplate stylesheets, other frameworks like Bootstrap, custom rules for the app, errors in the app, broken network requests and whatnot. If you can send us a live URL or a sample where we can observe the problem we will help, until then, we can only guess. If this is private information, you can always open a support ticket.

Regards,

Marin Bratanov
Telerik by Progress

[George]

Thank-you for the .rwCloseButton, I changed the colour and background color, the X color stayed white, but the background colour showed a nice square around the X.  I wonder that the X is a white graphic and normally put on a title bar.  I do not have a title bar beyond the X; the top is white.

I believe the problem is that I use the MetroTouch skin.  It has a white top and does not seem to handle the white X properly.  Trying other skins, they all have different and sizes of the X with the X always showing.  

Not liking the other skins leaves me the background which solves the problem just fine.  It even flips from square to round background nicely.

Thank-you for providing the class name.

[Marin Bratanov]

Hi George,

Are you using the 2017.1.118 release? If so, could you try rolling back to 2016.3.1027, because there are a few known issue with the skins in the R1 2017 release and a transparent background in the Metro skin is one of them.

As for the icon - it is different in the Classic and Lightweight mode. In classic it is an image sprite, and in the lightweight mode it is a font icon that takes the color via CSS.

Regards,

Marin Bratanov
Telerik by Progress

[George]

Yes, I am up to date with 2017.1.118.  I guess they should fix the skin problems.

The icon shows up with the same blue background I gave it in all the render modes.

It is working fine now.

[bill]

I have the exact same issue... metro touch skin used to show X and close just fine... with latest upgrade it disappears.

Other skins Default, Metro and BlackMetroTouch function as expected.

There seems to be a problem with the MetroTouch skin!!!

I hope Telerik will continue to treat it as an issue and come up with a fix.

 

[Marin Bratanov]

Hi Bill,

This is a bug in the metro touch skin and we intend to fix it. You can find workarounds for the time being here: https://feedback.telerik.com/Project/108/Feedback/Details/210865-appearance-issues-in-radwindow-in-r1-2017. Clicking Follow this item will provide you with status updates.

Regards,

Marin Bratanov
Telerik by Progress

[George]

I worked around it with Marin's help by putting this in the ASP's with the dialog.

<style>
    .rwCloseButton {
        background-color:#0094ff;
    }
</style>

which puts a blue background behind the white X.  It has been working fine using this workaround.  

The latest ASP.Net Telerik update  v.2017.1.228.45 did not fix the problem.