Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » eo:Dialog and box-shadow

eo:Dialog and box-shadow Options
Previous Topic · Next Topic
Jamie Miller
Posted: Wednesday, November 30, 2011 10:55:08 AM
Rank: Member
Groups: Member

Joined: 2/6/2009
Posts: 26
Hi,

Given the aspx and css code below:

Code: HTML/ASPX 
<eo:Dialog ID="Dialog1" runat="server" BackColor="White" Height="200px" Width="300px">
    <ContentTemplate>
        <div class="dropshadow">
            This is the content
        </div>
    </ContentTemplate>
</eo:Dialog>
<div class="dropshadow">
        This is the content
</div>
<a href="javascript:void eo_GetObject('Dialog1').show(true);">Show Dialog</a>


Code: CSS 
body   
{
    background:#ffffff;
    color:#000000;
}
.dropshadow
{
    padding:10px;
    border:solid 1px black;
    box-shadow:3px 3px 6px #aaa;
}


I have a problem with the drop shadow. In Google Chrome the drop shadow appears on the div and on the dialog as expected. In IE9 the drop shadow only appears on the div - it doesn't appear on the dialog.

Has anyone else had this issue? Is it just a problem with IE or is it a problem between eo:Dialog and IE?

My EO.Web version is 8.0.60.2.

Thanks.
Back to top
 
eo_support
Posted: Wednesday, November 30, 2011 4:26:57 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

This is an issue with IE 9. Try the following code and you will see drop shadow does not work:

Code: HTML/ASPX 
<table style="border-collapse: collapse;">
        <tr>
            <td>
                <div class="dropshadow">
                    This is the content
                </div>
            </td>
        </tr>
</table>


The dialog has built in support for shadows (by setting ShadowDepth property). However the shadow produced on Chrome is not as smooth as box-shadow property.

Thanks!
Back to top
 
Jamie Miller
Posted: Wednesday, November 30, 2011 9:48:56 PM
Rank: Member
Groups: Member

Joined: 2/6/2009
Posts: 26
What problems would be caused by adding:

Code: CSS 
table.eo_no_border_spacing
{
	border-collapse:separate !important;
}


to my css?

It appears to fix the issue in IE9 in my test app, just wondering what problems it would cause?
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.