Issue with Ajax calendar extender not displaying full calendar due to being cut off

I've implemented the Ajax calendar extender with my own custom CSS classes. The styles are being applied correctly, but I'm encountering an issue. When the calendar at the bottom of the page opens, it gets cut off at the bottom due to the restricted boundary of the form. How can I make it overlap the form boundary and display the calendar in full view?

In the image above, the blue line at the bottom represents the form border. Below are the CSS classes that I've used to style the calendar:

.calendarContainer table th
{
    padding: 0!important;
    margin: 0!important;      
    border: 0!important; 
}

.calendarContainer table td
{
    padding: 0!important;
    margin: 0!important;      
    border: 0!important; 
}

.calendarContainer .ajax__calendar_container   {
    background-color: #DEF1F4;   
    border: solid 1px #A1DCF2;  
    z-index : 10000 ;  
}

.calendarContainer .ajax__calendar_header  
{
    background-color: #ffffff;
    margin-bottom: 4px;
}

.calendarContainer .ajax__calendar_title,
.calendarContainer .ajax__calendar_next,
.calendarContainer .ajax__calendar_prev    {
    color: #004080;
    padding-top: 3px;
}

.calendarContainer .ajax__calendar_body    {
    background-color: #ffffff;
    border: solid 1px #A1DCF2;
    z-index : 10000 ;
}

.calendarContainer .ajax__calendar_dayname {
    text-align: center;
    margin-bottom: 4px;
    margin-top: 2px;
    color: #004080;
}

.calendarContainer .ajax__calendar_day {
    color: #004080;
    text-align: center;
}

What would be the appropriate CSS solution for this issue?

asp.netcssajaxcontroltoolkit

Answer №1

Check out this styling for the Ajax calendar control:

/* css for Ajax calendar control. */

.Calendar td
{
            text-align: left; 
            padding: 0px; 
            height: 19px; 
            font-family:Verdana, Geneva, sans-serif; 
            font-size:12px; 
            color:#333;
}


.Calendar .ajax__calendar_container
{
            background-color: white;
            border: solid 1px #cccccc;
}
.Calendar .ajax__calendar_header
{
            background-color: #ffffff;
            margin-bottom: 4px;
}
.Calendar .ajax__calendar_title, .Calendar .ajax__calendar_next, .Calendar .ajax__calendar_prev
{
            color: black;
            padding-top: 3px;
}
.Calendar .ajax__calendar_body
{
            background-color: white;
            border: solid 1px #cccccc;
}
.Calendar .ajax__calendar_dayname
{
            text-align: center;
            font-weight: bold;
            margin-bottom: 4px;
            margin-top: 2px;
}
.Calendar .ajax__calendar_day
{
            text-align: center;
}
.Calendar .ajax__calendar_hover .ajax__calendar_day, .Calendar .ajax__calendar_hover .ajax__calendar_month, .Calendar .ajax__calendar_hover .ajax__calendar_year, .Calendar .ajax__calendar_active
{
            color: #004080;
            font-weight: bold;
            background-color: silver;              
}
.Calendar .ajax__calendar_today
{
            font-weight: bold;
}
.Calendar .ajax__calendar_other
{
            color: #bbbbbb;
}
.Calendar .ajax__calendar_hover .ajax__calendar_today, .Calendar .ajax__calendar_hover .ajax__calendar_title
{
            color: Blue;
}

/* End */

For implementation in aspx:

<cc1:CalendarExtender ID="cetbDate" runat="server" Enabled="True" Format="dd/MM/yyyy"
     TargetControlID="tbFromDate" PopupPosition="TopLeft" CssClass="Calendar">
</cc1:CalendarExtender>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Putting text on top of an image using Bootstrap

Recently diving into the world of Bootstrap, I have come across a puzzling issue: Take a look at the HTML code from my website: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

JQuery Utilization: Constructing Queries - Techniques for Extracting Queries from Backend Code

Incorporating JQuery Query Builder into my ASP.net project. How can I retrieve the generated query from the code behind? Additionally, is there functionality to dynamically update one filter based on another selected filter? ...

c#jqueryasp.netwebformsquery-builder

The input and label are not experiencing any overflow

I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now. My objective is to have the label inside the "input" field, with the input taking ...

htmlcss

Displaying image issues persist on Safari browsers for Mac and iPhone

I am currently working on a website and facing an issue with the responsive image display on Safari for Mac/iPhone. Here is the code snippet I have been using: <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" co ...

htmlioscssiphonesafari

What are the best ways to ensure that my side menu, bottom buttons, and content are all responsive

I have been struggling with creating a responsive side menu in my HTML code. Despite my efforts, the side menu contents, buttons, and layout do not adjust properly when resizing the browser window. When I drag the browser size from bottom to top, the butto ...

cssresponsive-designresponsive

The multiline feature of tooltip on mat-table cell is malfunctioning

I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS: .mat-tooltip-class-here { white-space: pre-line !important; } Interestingly, this formatting works on span and button elements but not on mat cells. ...

cssangulartooltipmat-table

The CSS class name is not having any impact on the React.js components

Struggling with CSS integration in ReactJS? That's the issue I've been facing while working on a project involving Rails and ReactJS. Despite implementing styles in my JSX files, nothing seems to change visually. Take a look at what my App.jsx fi ...

cssreactjswebpack

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

javascriptcssangularjsslideng-animate

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

javascriptcssangular

Which specific CSS rule is responsible for the issue I am currently experiencing?

I have styled a left-hand border on items in a list, with the border-left-color set to transparent for all of them. The active item, marked by the css class "active day", has a specific color for its border. Below is a snippet of the code (certain styles h ...

htmlcss

Establishing updated file path for resources in JavaScript based on environment

I'm currently facing an issue with my external Javascript file that uses the getScript() function to execute another JS file. Both files are located on static.mydomain.com, as I am trying to set up a Content Delivery Network (CDN) for the first time. ...

phpjavascriptjquerycsscdn

In order to check a checkbox, you need to ensure that the scrolling div has been scrolled to the very

I have a situation where I need to ensure that a user has scrolled to the bottom of a disclaimer before they can acknowledge it by checking a checkbox. Our legal department requires this extra step for compliance reasons. Here is an example of how the mark ...

jquerycsscheckboxscrollonchange

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

javascripthtmlcssresponsive-designhtml-table

The functionality of CSS transform appears to be malfunctioning on Firefox browser

My website, located at , features a logo that is centered within a compressed header. I achieved the centering effect using the following CSS command: .html_header_top.html_logo_center .logo { transform: translate(-63%, -2%); } This setup works perfe ...

css

Explore the interactive feature of hovering over a component within a div that is enhanced with a transformative translate3d effect upon hover. Discover the seamless event queuing

Within a div, there is a modal component that includes a transform: translate3d effect with hover transition. The div is created using vue.js list rendering method. Upon opening the modal and hovering over it, it jerks between the parent div and its intend ...

cssvue.jsvuejs2css-transitionstranslate-animation

"Enhancing user experience with jQuery hover effects on table

This is an example of the HTML structure: <tr class="row-1 row-first"> <td class="col-1 col-first"> <div class="views-field views-field-field-logo-image"></div> <div class="views-field views-field-field-logo-title"> ...

jquerycsshtml-table

What methods can be used to control access to document.styleSheets data, and what is the purpose behind doing so?

Recently, I came across the document.styleSheets API, which allows you to access stylesheets used by a website. Using this API is simple, for example, document.styleSheets[0].cssRules will provide all CSS rules for the first stylesheet on a page. When I t ...

javascriptcss

Handsontable now offers a feature for input validation that allows users to restrict input to only numbers,

Currently, I am utilizing the Handsontable jQuery plugin to construct a spreadsheet resembling Excel. The ultimate goal is to save this table data into an Excel file using ASP.NET. My inquiry revolves around restricting all cells in the table to only acce ...

asp.netvalidationnumerichandsontable

Use JQuery to reverse the most recent button click

Here is the code snippet I am working with: <button class="btn">New York</button> <button class="btn">Amsterdam</button> <button class="btn">New Jersey</button> <button class="btn&qu ...

javascripthtmljquerycssjquery-plugins

Update the background image every minute with a smooth transition effect

I am currently in the process of developing a personal dashboard that requires dynamic background images to change every minute. To achieve this functionality, I have integrated the [Pixabay API][1] and formulated the following API request: https://pixaba ...

javascripthtmljquerycssbackground-image