Hello there... I have a WebTab control that is displaying the data successfully as implemented, but the horizontal menu above it has fly out options that appear vertically and those options are appearing behind the WebTab control, preventing the user from seeing them or selecting them. I have tried using z-index on the WebTab control and the asp:Menu control, but to no avail. Is there any way to set the WebTab control to appear at the bottom of the page stack (behind all other controls)?
Hello Keith Posey and mcvick,
Thank you for posting in our forums!
Please let me know what version and build of Infragistics you are experiencing this with. e.g. 15.1.20151.1018
Using IE 11.0.9600.17728 with Infragistics 15.1.20151.1018, I am able to include the asp:Menu with the WebTab and do not experience this behavior.
I have attached the sample project I used to test this. Please test this project on your PC; whether or not it works correctly may help indicate the nature of this problem.
If the project does not work correctly, this indicates either a problem possibly specific to your environment, or a difference in the DLL versions we are using. My test was performed using version 15.1.20151.1018 in Infragistics ASP.NET 2015 Volume 1.
If the project does show the product feature working correctly, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
Please let me know if I can provide any further assistance.
Hey Michael... thanks for the quick reply... I am using IE 11.0.9600.17728 and Infragistics4.Web.v13.1 from Infragistics NetAdvantage.
Hello Keith Posey,
I followed the steps you suggested and was unable to reproduce the behavior you're describing. I set up a horizontal asp:Menu and a WebTab below it using Infragistics 13.1. When I run the page and hover over the asp:Menu, the dropdown items render on top of the WebTab as expected.
If the project does not work correctly, this indicates either a problem possibly specific to your environment, or a difference in the DLL versions we are using. My test was performed using version 13.1.20131.2331 in Infragistics ASP.NET 2013 Volume 1.
Hey Michael... thanks for the follow-up. Your testing steps made me think of doing the same... building a bare-bones page that does not have any hooks to any other styling potential nested elsewhere in the site (just the two controls in question) and I am still getting the same results with the new page that I have created. I have attached the file for you to test, as well. Let me know what you see. I'll download and test your sample, as well. Thanks!
My testing is in IE 11.
Hey Michael... so here is an update on my end... when I run my test UI page through my local IIS server, it is not displaying correctly, but when I run it through the VS Development Server (the way your test page is setup to run), it is displaying correctly. So I'm unclear as to how the IIS Server is somehow hooking other style features onto the test page to blow up the layering of the controls. The local IIS server does have access to all the other site files, which I would understand may have styling hooks from various CSS files integrated into the site, but the test page is not directly referencing any styling class names or anything like that... strange brew, indeed. Is there some setting in IIS that handles styling for pages it serves up? Usually I would set up a Theme in the ASP.NET web application and apply the theme globally to all the pages via the Pages element in the web.config of the site, which would have this kind of site-wide style effect, but that is not how things are wired up in this particular web application, so I'm stuck trying to figure out how the IIS server is somehow applying this styling...
Hi Keith,
Thank you for the sample code and information.
After running your code in Visual Studio (instead of IIS) I was able to reproduce this behavior. After looking at your code, I saw that you have the Menu.IncludeStyleBlock property set to false. This means the menu is not including any of its own styling and expects the page developer to provide your own styling. According to MSDN:
You typically set this property to false in the following situations:
- You want to provide your own CSS definitions in order to customize the appearance of the menu. You must then provide your own block of CSS definitions in the page, or include a link to an external CSS file that contains the definitions.
- You want to keep the default appearance but prefer to keep the generated CSS definitions in a separate file. You must then provide the file and link to it.
When this property is set to true, the Menu automatically renders the following in the page:
<style type="text/css"> /* <![CDATA[ */ #NavigationMenu img.icon { border-style:none;vertical-align:middle; } #NavigationMenu img.separator { border-style:none;display:block; } #NavigationMenu img.horizontal-separator { border-style:none;vertical-align:middle; } #NavigationMenu ul { list-style:none;margin:0;padding:0;width:auto; } #NavigationMenu ul.dynamic { z-index:1; } #NavigationMenu a { text-decoration:none;white-space:nowrap;display:block; } #NavigationMenu a.static { padding-left:0.15em;padding-right:0.15em; } #NavigationMenu a.popout { background-image:url("/WebResource.axd?d=fSxzh5koJfSg84Mau_awUhOf6vnWCbdAtOwGr5HnSFpkglktfIl5zIIch2ifKisQwleleboVxRN7hzCBxfG-QJJ4Mez003Kayvvz2hAfXJw1&t=635589255476784022");background-repeat:no-repeat;background-position:right center;padding-right:14px; } /* ]]> */</style>
The part that sticks out to me here is "#NavigationMenu ul.dynamic { z-index:1; }". If this style line is included on your page when this property is false, the menu renders on top of the WebTab. As for why you experience this in IIS and not in Visual Studio that may be related to something else. If you include that style on the page, do you still experience the issue in IIS? Also, are you experiencing this with any other controls besides the menu rendering behind the WebTab?
Looking forward to hearing from you.