DropShadow hides my menu items on back

I used dropshadow and when I pull down menut item to navigate to other page I cannot click on it as it's hide behind dropshadowextender?

On the menu element, try setting:

<asp:Menu id="Menu1" style="position:relative:z-index:5" ... >

I tried this and this does not work! The shadow override the menus.

This worked when I removed this tag:

<

atlasToolkit:DropShadowExtenderID="dse"runat="server"><atlasToolkit:DropShadowPropertiesTargetControlID="Panel1"Width="5"Rounded='true'Opacity=".75"TrackPosition="true"ID="dsBehavior"/>

</

atlasToolkit:DropShadowExtender>

Yes I had to remove the shadow to get this going even though my menu has:

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"Font-Bold="true"style="position:relative; z-index:5">

It's the 2nd level menus that are hidden underneath the shadow. I think it completely ignores the Z-index of the menu

That worked for me but I have more question,

1) how to make size of both panel and table look same so that I have good effect of drop shadow, as with the below code my panel is too big and table is inside the panel. I tried to make size of both table and panel same still does not work.

2)How to use different color besides black for shadow?

<

asp:PanelID="pnlTable"runat="server">
<tableclass="table">
<tr>
|<tdcolspan="2"class="heading">Search Parts By Supplier or Return Parts</td>
</tr>
<tr>
<tdclass="tdheading">Supplier ID</td>
<td><asp:TextBoxID="txtsearchsuppID"runat="server"Width="208px"></asp:TextBox></td>
</tr>
<tr>
<tdclass="tdheading">From Date<asp:TextBoxID="txtfromdate"runat="server"></asp:TextBox>
<asp:PanelID="pnlFrom"runat="server">
<asp:CalendarID="fromClnd"runat="server"OnSelectionChanged="fromClnd_SelectionChanged">
</asp:Calendar>
</asp:Panel><cc1:CollapsiblePanelExtenderID="CPEfromClnd"runat="server"><cc1:CollapsiblePanelPropertiesCollapseControlID="txtfromdate"Collapsed="True"AutoCollapse="True"AutoExpand="True"CollapsedSize="0"ExpandControlID="txtfromdate"ExpandedSize="180"TargetControlID="pnlFrom"/></cc1:CollapsiblePanelExtender></td></tr>
<tr>
<tdcolspan="2"><asp:ButtonID="btnSearch"runat="server"Text="Search"OnClick="btnSearch_Click"/>
</td></tr>
</table></asp:Panel>

The DropShadow isn't ignoring the zIndex of the menu - it has no knowledge of it. I suspect that the sub-menu items created by the ASP.NET menu control don't have zIndexes on them, so they default to 0 which causes them to show up beneath the dropshadow items.

The Sub Menus don't have a style property to adjust unlike the asp:Menu. They have a CssClass which is what I'm assuming you mean.

I removed the following off the panel to show the underlying shadow.

CssClass="dropShadowPanel"

Then I placed z-index: 155 everywhere for the menu.

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"StaticDisplayLevels="1"Font-Bold="true"Style="z-index:115"><StaticMenuItemStyleCssClass="MenuStyle"VerticalPadding="2px"/><DynamicHoverStyleCssClass="MenuStyle"BackColor="#e1ecfc"/><DynamicMenuItemStyleCssClass="MenuStyle"BackColor="#e1ecfc"/></asp:Menu>

.MenuStyle

{FONT-SIZE:8pt;VERTICAL-ALIGN:top;FONT-FAMILY:verdana;PADDING-BOTTOM:5px;z-index:115}

The menu appears beneath the shadow regardless of all the combinations I have tried.

A quick fix but I lose screen space is:

StaticDisplayLevels

="2"

Oh - ok. Yeah, the dropshadow is absolutely positioned. Since your items are statically positioned, they have a different zIndex stack. Sorry, I didn't think of that. Try adding "position:relative" to your MenuStyle class (and specify that on your Menu control's CssClass property too).

No you're not slipping. You mentioned that before. :)

It's beyond me. I've gone throught the 2 stylesheets I have and I can't figure it out.

I'm down to:

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"StaticDisplayLevels="1"Font-Bold="true"Style="position:relative; z-index:30"><StaticMenuItemStyleCssClass="MenuStyle"VerticalPadding="2px"/><DynamicHoverStyleCssClass="MenuStyle"BackColor="#e1ecfc"/><DynamicMenuItemStyleCssClass="MenuStyle"BackColor="#e1ecfc"/></asp:Menu>

.MenuStyle

{FONT-SIZE:8pt;VERTICAL-ALIGN:top;FONT-FAMILY:verdana;PADDING-BOTTOM:5px;position:relative;z-index:30}

On load up it flashes ontop then quickly reverts underneath. I'musing IE6.0 SP2. I'll send the source if you are really keen! :)

I have same issue like Glyder, on load up it flashes for a second for many Atlast control like dropshadow, collapsible Panel etc.
second issue is I loose my css style sheet setting any where I use atlas control. when it post back it settings are applied.
Example:

Suppose I applied css="table" for table it does not take affect until first post back, how to take care of this both problem.This will be really helpful if we can figure this out.

Hmm - yeah I'd like to take a look at this. If you could send me a repro, I'd appreciate it.
what is repro? my code?
<atlas:ScriptManagerID="SM"EnablePartialRendering="true"runat="server"></atlas:ScriptManager><atlas:UpdateProgressID="Progress"runat="server"><ProgressTemplate>

Updating Please Wait...

<imgalt="Wait"id="ImgWait"src="Images/Wait_indicator_flower.gif"/></ProgressTemplate></atlas:UpdateProgress>
<atlas:UpdatePanelID="Up1"runat="server"><ContentTemplate><asp:PanelID="pnlParent"DefaultButton="btnaddparSupp"runat="server"Visible="False"><tableclass="table"><tr><tdcolspan="2"class="heading1">

Supplier Maintenance - Setting up New Supplier Information

</td></tr><tr><tdstyle="width: 153px"align="left">

Supplier Name

</td><tdstyle="width: 334px"align="left"><asp:TextBoxID="txtparSuppName"runat="server"></asp:TextBox><asp:RequiredFieldValidatorID="ReqParSuppName"runat="server"ControlToValidate="txtparsuppName"ErrorMessage="Req"></asp:RequiredFieldValidator></td></tr>

<

tr><tdalign="center"colspan="2"class="tdheading"><asp:ButtonID="btnaddparSupp"runat="server"Text="Add"/><asp:ButtonID="btncancelparSupp"runat="server"CausesValidation="False"EnableViewState="False"Text="Cancel"/></td></tr></table></asp:Panel></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="btnParent"EventName="Click"/></Triggers></atlas:UpdatePanel>

The XHTML you're using including the menu, the DropShadowExtender, and the panel it's targeting please.

Also, please use a smaller font size when pasting in code. Thanks.

Hi, I've the same problem as you, and I found a workaround:
I have a panel where my menu is:

<asp:Panel ID="menuPanel" runat="server" CssClass="menuDiv" Style="z-index:115">
 <asp:Menu ID="Menu1" runat="server">
 <Items>
 ... (items)
 </Items>
 <StaticHoverStyle BackColor="#990000" ForeColor="White" />
 </asp:Menu>
</asp:Panel>

then other panel for the content of the page:

<asp:Panel ID="mainPanel" runat="server" CssClass="mainDiv">
 ...
</asp:Panel>

then I apply the shadow to the mainPanel, but also I have to apply shadows to menuPanel (otherwise doesn't work):

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server">
 <cc1:DropShadowProperties TargetControlID="mainPanel" />
</cc1:DropShadowExtender
<cc1:DropShadowExtender ID="DropShadowExtender2" runat="server">
 <cc1:DropShadowProperties TargetControlID="menuPanel" />
</cc1:DropShadowExtender>

And it works!!! but that's not the perfect way. As you can see I have to apply shadow on both panels, and in the menuPanel I have to put Style="z-index:115", and the most strange is that if a put z-index in a CssClass (menuDiv in my case) i doesn't work, I have to put it in the control itself.

Haha, thanks Matias I was able to get around a similar issue by using your method.

DropDownList SelectedIndexChanged not firing

I have an issue with a DDL where my SelectedIndexChanged only gets fired when the second list item is selected (there are only 2 items in the list). The first item in the list is the default item and is set to selected. Also the list items are not bound via a datasource, they are already populated.

The DDL is wired up to the UpdatePanel as a Trigger. The DDL is also located outside the UpdatePanel - I tried having the DDL inside the UpdatePanel as well but the same issue comes up.

The Update does occur because I verified that the Page_Load fires when I switch between the two DDL items.

Any ideas?

The trick to this is to insert another record as the default selection of the DDL. I always insert a ListItem at run-time right after I bind the records to the DDL that tells the user to make a selection, for example 'Select State'. This solves two problems, it helps guide the user (let's face they need all the help they can get) and will force the selectedindexchanged event to fire like you want.

ddlState.Items.Insert(0,New ListItem("Select a State", 0))

Here is a Blog entry I made on the topic:

http://professionalaspnet.com/archive/2007/12/22/Cures-for-the-Common-Ailments-_2D00_-DropDownList.aspx

I was hoping that wasn't the fix but I guess I'll just have to work with it.

Thanks!

Have you set the property named "ChildrenAsTriggers" of the UpdatePanel to true?

DropDownList causes a full page postback instead of only updating the UpdatePanel

I have a code for updating a DropDownList with items whenever another DropDownList triggers a SelectedIndexChanged event.

When I select an item in the DDLSelect dropdown, it causes a full page postback instead of just updating the UpdatePanel. This problem only occurs when I try to implement it in an existing project, and it works fine when if I try it in a new project.

I've updated my Web.config file to make my project compatible with AJAX, so I don't believe that's the problem.

I should add that I'm trying to use this inside an ascx UserControl file, so maybe there are known issues there.

Thanks in advance.

Please post the usercontrol code

OK, problem solved!

It was the Web.config after all. I had this line which caused the problem:

<

xhtmlConformancemode="Legacy"/>

I removed it and everything is fine.

Cheers.