Tại sao CalendarExtender của tôi bị chồng chéo khi được hiển thị?

Question

Tôi đang làm việc trên ứng dụng web .NET và tôi đang sử dụng điều khiển CalendarExtender trong đó để người dùng chỉ định ngày. Vì lý do nào đó, khi tôi nhấp vào biểu tượng để hiển thị lịch, nền có vẻ trong suốt.

Tôi đang sử dụng bộ mở rộng trên các trang khác và không gặp sự cố này.

Tôi không chắc liệu nó có đáng nói hay không, nhưng lịch được lồng trong một bảng có bộ mở rộng góc tròn gắn với nó, cũng như bảng bên dưới nó (nơi "Từ" trùng lặp).

Trong bảng điều khiển đó, tôi có thiết lập bố cục div để tạo hai cột.

EDIT: Điều khác cần lưu ý ở đây là phần có tên và "placeholders" cho biệt hiệu là tất cả các điều khiển nhãn ASP.NET, nếu điều đó quan trọng.

Answer 1

Vì vậy, một số chi tiết khác xung quanh và tôi đã tìm ra vấn đề. Một phần của vấn đề phát sinh từ thực tế là bố cục div tôi thiết lập để tạo ra hai cột riêng biệt đang sử dụng vị trí: tương đối và float: thuộc tính phải/trái. Từ những gì tôi đã đọc, ngay sau khi bạn bắt đầu tăng thêm thuộc tính vị trí của thẻ div, nó ảnh hưởng đến chỉ mục z của hiển thị, điều này chỉ phức tạp khi điều khiển lịch "tự động bật lên".

Thật không may là không có thuộc tính Z-Index đối với CalendarExtender, trừ khi bạn muốn viết toàn bộ kiểu cho lịch mà tôi không muốn làm. Tuy nhiên, bạn có thể mở rộng phong cách mặc định bằng cách thêm dòng sau vào file CSS của bạn:

.ajax__calendar_container { z-index : 1000 ; } 

Nếu bạn không sử dụng một file CSS, bạn cũng có thể thêm vào phần đầu trang của bạn:

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

và điều đó cần thực hiện thủ thuật. Nó làm việc cho tôi. Nếu vì một số lý do điều này không hiệu quả (và một số người vẫn đang báo cáo vấn đề), cách tiếp cận "tích cực" hơn một chút là bao bọc các trường nhập và CalendarExtender trong thẻ DIV rồi thêm phần sau vào CSS của bạn tệp/phần HEAD:

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

... và hy vọng điều đó sẽ phù hợp với bạn.

Answer 2

Điều đó không rõ ràng đối với tôi, có vẻ như nó đang hiển thị "đằng sau" các phần tử khác. Bạn có chỉ định "chỉ mục z" cho bất kỳ mục nào không?

Answer 3

Tôi đã có một vấn đề tương tự mà tôi cố định với chỉ số z trên fieldsets

Nếu bạn có

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

thì ajax sổ popup hiện lên bên dưới fieldset thứ hai, để sửa chữa thiết lập z-index trên trường đầu tiên cao hơn giá trị thứ hai, ví dụ như dưới đây.

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

Answer 4

Các chỉ cách tôi đã tìm thấy để giải quyết vấn đề trong IE7 là để thêm một số CSS để trang tôi đã gặp vấn đề với.Không có số lượng z-indexing hoặc div gói và tái tạo kiểu đã có hiệu lực.

Các thay đổi sau đây kiểm soát bối cảnh xếp chồng.

.ajax__calendar_container 
{ 
    position:static; 
} 

Điều này dẫn đến cửa sổ lịch xuất hiện theo chiều dọc trên điều khiển bộ mở rộng thay vì theo chiều dọc dưới mức bình thường. Đối với tôi đó là chấp nhận được.

Answer 5

Cách duy nhất tôi tìm thấy để giải quyết vấn đề này là viết một số quy tắc css cho calendarExtender. Nó làm việc cho tôi. Mã này là dưới đây:

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

Answer 6

Nếu những câu trả lời không làm việc đúng cách nó có thể là một vấn đề với ẩn tràn. Điều này có thể được giải quyết bằng cách sử dụng css sau đây:

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