X for close has disappeared

12 posts, 2 answers
  1. George
    George avatar
    84 posts
    Member since:
    Oct 2014

    Posted 15 Feb Link to this post

    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 show up fine still  and 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?

  2. Patrick
    Admin
    Patrick avatar
    204 posts

    Posted 15 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. George
    George avatar
    84 posts
    Member since:
    Oct 2014

    Posted 15 Feb Link to this post

    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 several  background:white styles that do not seem do effect it. I changed them all to colors to no effect. Regardless, background:white 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.

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3892 posts

    Posted 16 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. George
    George avatar
    84 posts
    Member since:
    Oct 2014

    Posted 16 Feb Link to this post

    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.

  6. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3892 posts

    Posted 17 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. George
    George avatar
    84 posts
    Member since:
    Oct 2014

    Posted 17 Feb in reply to Marin Bratanov Link to this post

    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 coloured 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 colours and sizes of the X with the X always showing.  

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

    Thank-you for providing the class name.

  8. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3892 posts

    Posted 20 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. George
    George avatar
    84 posts
    Member since:
    Oct 2014

    Posted 20 Feb Link to this post

    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.

  10. bill
    bill avatar
    1 posts
    Member since:
    Aug 2014

    Posted 26 Mar Link to this post

    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.

     

  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3892 posts

    Posted 27 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. George
    George avatar
    84 posts
    Member since:
    Oct 2014

    Posted 27 Mar Link to this post

    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.

Back to Top