为什么渲染时我CalendarExtender越来越重叠？ [英] Why is my CalendarExtender getting overlapped when rendered?

问题描述

我工作的一个.NET Web应用程序，我用它在一个CalendarExtender控制让用户指定一个日期。出于某种原因，当我点击该图标以显示日历，背景似乎是透明的。

I'm working on a .NET web application and I'm using a CalendarExtender control within it to have the user specify a date. For some reason, when I click the icon to display the calendar, the background seems to be transparent.

我使用其他页面的扩展，并不会遇到这个问题。

I'm using the extender on other pages and do not run into this issue.

我不知道是否值得一提，但日历嵌套在附加了一个圆角扩展，以及它下面的面板（这里的从是重叠）面板内。

I'm not sure if it is worth mentioning, but the calendar is nested within a panel that has a rounded corner extender attached to it, as well as the panel below it (where the "From" is overlapping).

在该面板，我有一个div布局设置，以创建两列。

Within that panel, I do have a div layout setup to create two columns.

编辑：其他的事情，这里要注意的是，其名称和占位符为昵称的部分都是ASP.NET标签控件，如果该事项

The other thing to note here is that the section that has the name and "placeholders" for nickname are all ASP.NET label controls, if that matters.

推荐答案

所以多一些闲逛，我想通了这个问题。相对的，浮动：左/右属性的部分问题的事实，在div布局设置我创建的使用位置两个单独的列出现。

So some more poking around and I figured out the issue. Part of the problem arises from the fact that the div layout I setup to create two separate columns is using the position:relative and float:right/left attributes.

从我读过，一旦你开始充实div标签的位置属性，它会影响渲染，仅当日历控件弹出动态变得复杂的z-index的。

From what I've read, as soon as you start augmenting the position attribute of a div tag, it affects the z-index of the rendering, which only gets complicated when the calendar control is "popping up" dynamically.

不幸的是没有Z-index属性的CalendarExtender，除非你想要写的日历，我不想做一个完整的风格。但是，您可以通过添加扩展的默认样式以下你的CSS文件：

Unfortunately there is no Z-Index attribute to the CalendarExtender, unless you want to write an entire style for the calendar, which I don't want to do. However, you can extend the default style by adding the following to your CSS file:

.ajax__calendar_container { z-index : 1000 ; }

如果你不使用一个CSS文件，你还可以添加到您的网页的头部分是：

If you aren't using a CSS file, you can also add this into the head section of your page:

<style type="text/css">
   .ajax__calendar_container { z-index : 1000 ; }
</style>

和应该做的伎俩。它为我工作。

and that should do the trick. It worked for me.

如果由于某种原因，这并不工作（有些人还在报告问题），更有点咄咄逼人的办法是来包装输入字段和CalendarExtender在一个DIV标签，然后将以下添加到您的CSS文件/ HEAD部分：

If for some reason this doesn't work (and some people were still reporting problems), a little more "aggressive" approach was to wrap the input fields and CalendarExtender in a DIV tag and then add the following to your CSS file / HEAD section:

.ajax__calendar {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    visibility: visible; display: block;
}
.ajax__calendar iframe
{
    left: 0px !important;
    top: 0px !important;
}

...并希望这会为你工作。

...and hopefully that will work for you.

这篇关于为什么渲染时我CalendarExtender越来越重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！