Почему мой CalendarExtender получает перекрытие при визуализации?

Я работаю над веб-приложением .NET, и я использую в нем элемент управления CalendarExtender, чтобы указать дату. По какой-то причине, когда я нажимаю значок для отображения календаря, фон кажется прозрачным.

Я использую расширитель на других страницах и не сталкиваюсь с этой проблемой.

Я не уверен, стоит ли это упоминать, но календарь вложен в панель с прикрепленным к ней закругленным угловым расширителем, а также панель внизу (где "От" перекрывается).

Внутри этой панели у меня есть настройка макета div для создания двух столбцов.

EDIT: Еще одна вещь, которую следует отметить здесь, состоит в том, что раздел, который имеет имя и "заполнители" для псевдонима, все это элементы управления метками ASP.NET, если это имеет значение.

Ответы

Ответ 1

Так что еще немного тыкать, и я понял проблему. Часть проблемы возникает из-за того, что макет div, который я устанавливаю для создания двух отдельных столбцов, использует атрибуты position: relative и float: right/left.

Из того, что я прочитал, как только вы начинаете увеличивать атрибут позиции тега div, он влияет на z-индекс рендеринга, который только усложняется, когда элемент управления календарем "выскакивает" динамически.

К сожалению, для CalendarExtender нет атрибута Z-Index, если вы не хотите писать весь стиль для календаря, который я не хочу делать. Однако вы можете расширить стиль по умолчанию, добавив в свой CSS файл следующее:

.ajax__calendar_container { z-index : 1000 ; }

Если вы не используете файл CSS, вы также можете добавить его в раздел заголовка своей страницы:

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

и это должно сделать трюк. Это сработало для меня.

Если по какой-то причине это не сработает (и некоторые люди все еще сообщали о проблемах), немного более "агрессивный" подход заключался в том, чтобы обернуть поля ввода и CalendarExtender в теге DIV, а затем добавить следующее в ваш файл CSS/HEAD:

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

... и, надеюсь, это сработает для вас.

Ответ 2

Единственный способ, который я нашел для решения проблемы в IE7, - добавить дополнительный CSS на страницу, с которой у меня были проблемы. Никакое количество z-индексирования или обертывания и перетаскивания div не влияло.

Ниже перечисляется контекст стекирования элементов управления.

.ajax__calendar_container
{
    position:static;
}

Это приводит к тому, что всплывающее окно календаря появляется вертикально над элементом управления расширителем вместо вертикально ниже, как обычно. Для меня это было приемлемо.

Ответ 3

Это не выглядит прозрачным для меня, похоже, что оно "заслоняет" другие элементы. У вас есть "z-index", указанный для любых элементов?

Ответ 4

У меня была аналогичная проблема, которую я исправил с индексом z на полях

Если у вас

<fieldset> some content... including ajax popup </fieldset>
<fieldset> some more content </fieldset>

тогда всплывающее окно ajax появляется под вторым набором полей, чтобы установить, что z-индекс в первом наборе полей будет больше, чем второй, т.е. как показано ниже.

<fieldset style="z-index: 2;"> some content... including ajax popup </fieldset>
<fieldset style="z-index: 1;"> some more content </fieldset>

Ответ 5

Единственный способ решить эту проблему - написать некоторые правила CSS для calendarExtender. Это сработало для меня. Код ниже:

https://gist.github.com/carlosmr12/5825371

Ответ 6

Если эти ответы не работают должным образом, это может быть проблемой со скрытием переполнения. Это можно решить, используя следующий css:

.ajax__scroll_none {
    overflow: visible !important;
    z-index: 10000 !important;
}