locked
AJAX Calendar Partial Display RRS feed

  • Question

  • User-790433925 posted

    I am having a problem with a AJAX Calendar partially blocked by a CKEditor toolbar, please see the attached image and code.  Please see the included screenshot and code.  Even adjusting compatibility settings hasn't helped but the issue is only with IE 8 - 11.

    Any suggestions or recommendations would be most appreciated.

    Thank you in advance.

    Code:

    <ajaxToolkit:CalendarExtender id="CalendarExtender1" runat="server" TargetControlID="DateBox" PopupButtonID="Image1">
                        </ajaxToolkit:CalendarExtender>
    
    <CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server" Visible="false">
            </CKEditor:CKEditorControl>

    Tuesday, September 30, 2014 11:22 AM

All replies

  • User724169276 posted

    Hello,

    Hope you doing fine ,

    Just increase the z-index of the calender.

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

    Tuesday, September 30, 2014 3:00 PM
  • User-790433925 posted

    Greetings and thank you for your reply.  Unfortunately, adding the style had no effect.  However, opened the webpage in IE Developer Tools but could not locate the added style, shouldn't the z-index be listed there as well?

    Tuesday, September 30, 2014 4:55 PM
  • User724169276 posted

    rolfhersh

    Unfortunately, adding the style had no effect. 

    Follow this:

    <style type="text/css">
      .ajxCssCalender .ajax__calendar_container { z-index : 1000 ; }
    <style>
    
    <Ajax:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtCal" CssClass="ajxCssCalender">

    Wednesday, October 1, 2014 12:06 AM
  • User2103319870 posted

    shouldn't the z-index be listed there as well

    Try adding the important attribute to the css provided by Ashim.

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

    Wednesday, October 1, 2014 1:25 AM
  • User-790433925 posted

    Thank you for your solution, they were applied exactly as described and this is the result.  It looks like we're almost there, any suggestions? 

    Wednesday, October 1, 2014 6:24 PM
  • User2103319870 posted

    The css style names which we given is actually disturbing the calendarextender cs styles.Please change your code like given below

    Modify the css styles name like given below

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

    apply the css to calendarextender control like given below

     <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="DateBox"
                CssClass="ajax__calendar" PopupButtonID="Image1">
            </asp:CalendarExtender>

    Wednesday, October 1, 2014 7:06 PM
  • User-790433925 posted

    Even increasing the index had no effect.  What other adjustments could be made?

    Thank you in advance.

    Thursday, October 2, 2014 9:14 AM
  • User555306248 posted

    <cc1:CalendarExtender ID="ceadt" runat="server" TargetControlID="txtaaadate" OnClientShown="OnClientShown">
        </cc1:CalendarExtender>
        <script type="text/javascript">
            function OnClientShown(sender, args) {
                sender._popupBehavior._element.style.zIndex = 10005;
            } 
        </script>
    

    http://ajaxcontroltoolkit.codeplex.com/workitem/7825

    Tuesday, October 7, 2014 12:13 AM
  • User-790433925 posted

    Thank you Chetan for your reply and suggestion.  How would this placed within the code?

    Tuesday, October 7, 2014 9:18 AM
  • User-790433925 posted

    Still getting the same calendar display issue when using the above script.  What would you suggest?

    Thank you in advance.

    Monday, October 13, 2014 4:25 PM