RadWindow close button w/ OnHover CSS not working as expected under Opera

5 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 06 Sep 2011 Link to this post

    Hi Telerik,

    I am experiencing a weird quirk while developing under the Opera browser. 

    Version information
    Version
    11.51
     
    Build
    1087
     
    Platform
    Win32
     
    System
    Windows 7
     
    XHTML+Voice
    Plug-in not loaded
     
    Browser identification
     
    Opera/9.80 (Windows NT 6.1; U; Edition United States Local; en) Presto/2.9.168 Version/11.51

    I have this CSS property set on my dashboard page which is responsible for opening the corresponding RadWindow:

    .RadWindow_Web20 .rwCloseButton:hover
    {
        cursor: pointer;
    }

    and this is what happens when I mouse-over that icon in Opera: http://screencast.com/t/WMiaaJC3

    with relevant code-behind:

    <tr class="rwTitleRow">
    <td class="rwCorner rwTopLeft"> </td>
    <td class="rwTitlebar" style="cursor: move">
    <div class="rwTopResize">
    <!-- / -->
    </div>
    <table align="left" cellspacing="0" cellpadding="0" class="rwTitlebarControls">
    <tbody>
    <tr>
    <td style="width: 16px">
    <a class="rwIcon" style="background-position: 0px 0px; background-color: transparent; background-attachment: scroll; background-repeat: no-repeat; background-image: url("http://localhost/csweb_IISVS2010/Content/Dashboard/Icons/drive-upload.png"); background-size: auto; background-origin: padding-box; background-clip: border-box"/>
    </td>
    <td>
    <em unselectable="on" style="width: 194px">Upload Dashboard</em>
    </td>
    <td nowrap="true" style="white-space: nowrap">
    <ul class="rwControlButtons" style="width: 30px">
    <li>
    <a href="javascript:void(0);" class="rwCloseButton" title="Close">
    <span>Close</span>
    </a>
    </li>
    </ul>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    <td class="rwCorner rwTopRight"> </td>
    </tr>

    Weird, right? Any ideas, or is this a browser thing?
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 07 Sep 2011 Link to this post

    Hello Sean,

    Wouldn't you achieve the same result if you remove the 'hover' part, since it's a link. Perhaps that will resolve your issue.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 07 Sep 2011 Link to this post

    Hey Kevin,

    Good question. I can explain, partially, why this is not the case.

    In the original implementation of RadWindow, the rwCloseButton opts to not use default pointer settings. Instead, when the mouse hovers over the area, the background of the button changes instead of the mouse pointer. 

    I didn't care much for the icon being displayed on the default RadWindow. As such, I applied this CSS:

    .RadWindow_Web20 .rwCloseButton
    {
        background: url(./Icons/radwindow_close.png) no-repeat !important;
    }

    This CSS caused the icon to change to what I had desired, but removed the onhover:highlight button functionality. Now, without highlighting functionality, the mouse pointer looks weird. So, I applied this css:

    .RadWindow_Web20 .rwCloseButton:hover
    {
        cursor: pointer;
    }

    which causes the mouse pointer to look as-expected in all browsers except Opera.

    I'm assuming the solution is some sort of clear/reset CSS, but I am still new to learning the tricks of web development. :)

    Cheers,

    Sean
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 08 Sep 2011 Link to this post

    Hi Sean,

    I have tested a RadWindow with custom close button and everything works as expected in all major browser, including the cursor: pointer rule in Opera:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
            div.RadWindow_Web20 a.rwCloseButton,
            div.RadWindow_Web20 a.rwCloseButton:hover
            {
                background-image: url(http://conpro.tnc.org/button-close.png);
                background-position: 0 0;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="scrman1" runat="server">
        </asp:ScriptManager>
        <telerik:RadWindow ID="radw1" runat="server" VisibleOnPageLoad="true" Width="300"
            Height="300" Skin="Web20" Behaviors="Close">
        </telerik:RadWindow>
        </form>
    </body>
    </html>

    I have used an image with absolute url found in Google in order not to attach some extra files to the code sample.

    In you case, I suppose the code does not work as you could not override the existing CSS selectors form the embedded resources. Note that they are loaded after you CSS and if the selectors are with equal weight, the embedded will be applied. Note how I merged the HTML element with the class name to achieve heavier selector and to be able to apply it to the application.

    Best wishes,
    Bojo
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  6. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 08 Sep 2011 Link to this post

    Hi Bojo,

    Thank you for the code. This worked as I had hoped.

    Cheers,

    Sean
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017