Почему мой CalendarExtender перекрывается при визуализации? - PullRequest
11 голосов
/ 19 ноября 2008

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

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

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

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

РЕДАКТИРОВАТЬ: Другая вещь, на которую следует обратить внимание, это то, что раздел, имеющий имя и «заполнители» для псевдонима, - все это элементы управления метками ASP.NET, если это имеет значение.

Ответы [ 6 ]

25 голосов
/ 20 ноября 2008

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

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

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

.ajax__calendar_container { z-index : 1000 ; }

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

<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;
}

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

3 голосов
/ 12 февраля 2013

Способ only , который я нашел для решения проблемы в IE7, заключался в добавлении дополнительного CSS на страницу, с которой у меня были проблемы. Никакое количество z-indexing или div-обертки и повторного моделирования не дало эффекта.

Следующее изменяет контекст стека элементов управления.

.ajax__calendar_container
{
    position:static;
}

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

0 голосов
/ 05 июля 2017

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

.ajax__scroll_none {
    overflow: visible !important;
    z-index: 10000 !important;
}
0 голосов
/ 20 июня 2013

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

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

0 голосов
/ 15 мая 2009

У меня была похожая проблема, которую я исправил с помощью z index для fieldsets

Если у вас есть

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

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

<fieldset style="z-index: 2;"> some content... including ajax popup </fieldset>
<fieldset style="z-index: 1;"> some more content </fieldset> 
0 голосов
/ 19 ноября 2008

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

...