Why is my CalendarExtender getting overlapped when rendered?

后端 未结 6 1124
情歌与酒
情歌与酒 2021-02-14 02:21

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

6条回答
  •  情话喂你
    2021-02-14 02:48

    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.

    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.

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

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

    
    

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

    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.

提交回复
热议问题