EnableShadow For All Windows

7 posts, 1 answers
  1. kencox
    kencox avatar
    106 posts
    Member since:
    Oct 2002

    Posted 23 Jul 2010 Link to this post

    I want to use the shadow effect for all windows on the screen - not just the window that has the focus.

    Is there a way to make  EnableShadow="True" apply at all times for all windows?

    Thanks,

    Ken
  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 26 Jul 2010 Link to this post

    Hello Ken,

    The shadows were removed in the Window inactive state, as there is a problem when using together transparent png and filters. The problem occurs in Internet Explorer and looks like in: ieinactiveproblem.gif.

    In other CSS "friendly" browsers like Firefox, Sfari, Opera, that problem does not exists, and the shadows in the inactive state are rendered properly: shadowsnoproblem.gif.

    By using CSS you could force inactive state to have shadows - as I did for the examples shown in the image above, however, you will have problems in the look and feel in IE. To avoid the problems, we could remove the filters in the inactive state, but in that case, the inactive Windows in IE will not have opacity applied.

    Please, find radwin.zip attached - a simple project, where the shadows for inactive state were applied and the filters were removed.

    For this example, I have used the Telerik Default skin. If you want to use another Telerik Skin, or your custom skin, you should replace the Default skin shadowed sprite images with the skin specific, that you want to use.

    Best wishes,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. kencox
    kencox avatar
    106 posts
    Member since:
    Oct 2002

    Posted 26 Jul 2010 Link to this post

    Hi Bojo,

    Thanks very much for the excellent response!

    Your solution works perfectly in my case because I'm using the windows (the Web20 themse) as a static, non-movable container. Therefore, they don't need to be transparent.

    Thanks again for your help,

    Ken
    Microsoft MVP [ASP.NET]
    ASPInsider


  4. kencox
    kencox avatar
    106 posts
    Member since:
    Oct 2002

    Posted 26 Jul 2010 Link to this post

    Hi Bojo,

    I just noticed that in Chrome (and probably in other non-IE browsers), I'm getting a different appearance for the window that has the focus.

    Ideally (at least for my usage as container windows), the active and inactive appearance would be the same in all browsers.

    Thanks!

    Ken
  5. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 27 Jul 2010 Link to this post

    Hi Ken,

    Yes, the Window will work as expected in all major browsers except IE, where the inactive state will have opacity applied, while the other browsers will have it. If you want the inactive state to behave the same way in all browsers, you coudl add the following rows (marked in yellow) in the head section of the document:

    div.rwInactiveWindow .rwShadow .rwBodyLeft,
    div.rwInactiveWindow .rwShadow .rwBodyRight,
    div.rwInactiveWindow .rwShadow .rwStatusbarRow .rwCorner
     {
      background-image: url(WindowVerticalSprites.png) !important; /* overwrites the using of shadows sprite for the vertical elements */
     filter: none !important; /* removes the opacity in IE in order to avoid the problem using thogther transparent png and filter in IE  */
     opacity: 1 !important; /* removes the opacity in non IE browsers */
    }
                


    Kind regards,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. kencox
    kencox avatar
    106 posts
    Member since:
    Oct 2002

    Posted 27 Jul 2010 Link to this post

    Hi Bojo,

    Thanks for the latest information on setting the opacity for non IE browsers.

    However, something isn't quite right because only the vertical borders are receiving the correct style. I've attached a Chrome screenshot to show what's  happening.

    Ken
  7. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 28 Jul 2010 Link to this post

    Hello Ken,

    Yes, I see, I have missed to remove the opacity form the horizontal elements. Here is the full removing opacity from the inactive window CSS code:

    <style type="text/css">
     div.rwInactiveWindow .rwShadow .rwTopLeft,
     div.rwInactiveWindow .rwShadow .rwTopRight,
     div.rwInactiveWindow .rwShadow .rwTitlebar,
     div.rwInactiveWindow .rwShadow .rwFooterLeft,
     div.rwInactiveWindow .rwShadow .rwFooterRight,
     div.rwInactiveWindow .rwShadow .rwFooterCenter,
     div.rwInactiveWindow .rwShadow .rwTopResize,
     div.rwInactiveWindow .rwShadow .rwStatusbar div,
     div.rwInactiveWindow .rwShadow .rwStatusbar,
     div.rwInactiveWindow .rwShadow .rwPopupButton,
     div.rwInactiveWindow .rwShadow .rwPopupButton span,
     div.rwInactiveWindow .rwShadow.rwMinimizedWindow .rwCorner
      {
       background-image: url(WindowHorizontalSprites.png) !important; /* overwrites the using of shadows sprite for the horiznotal elements */
       filter: none !important; /* removes the opacity in IE in order to avoid the problem using thogther transparent png and filter in IE  */
       opacity: 1 !important; /* removes the opacity in non IE browsers form the horizontal elements of the sprite */
      }
     
     div.rwInactiveWindow .rwShadow .rwBodyLeft,
     div.rwInactiveWindow .rwShadow .rwBodyRight,
     div.rwInactiveWindow .rwShadow .rwStatusbarRow .rwCorner
      {
       background-image: url(WindowVerticalSprites.png) !important; /* overwrites the using of shadows sprite for the vertical elements */
       filter: none !important; /* removes the opacity in IE in order to avoid the problem using thogther transparent png and filter in IE  */
      opacity: 1 !important; /* removes the opacity in non IE browsers form the vertical elements of the sprite */
      }
    </style>


    All the best,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top