CODEWITHSUNDEEP
javascriptjqueryhtmlcsscalendar
Gino Perla
Gino Perla

Reputation: 101

show calendar on top of other elements

I'm struggling with my calendar because it actually takes too much space in the page.

The calendar is hidden at first: 

Visible="False"

Then when I click the button to select the date I show it:

protected void btnCalendar_Click(object sender, ImageClickEventArgs e)
    {
        if (Calendar1.Visible)
        {
            Calendar1.Visible = false;
        }
        else
        {
            Calendar1.Visible = true;
        }
    }

The problem is that the calendar takes the space in the page anyway, also if it's hidden, and when it opens up the page becomes pretty "awkward".

I'd like the calendar to be shown on top of the other items on the page, just on a "upper level", that way it doesn't split the header from the middle of the page.

Is there any way to do that with html or css? I've tried to put the calendar into a div, but then I couldn't find anything useful about the stuff I needed

Upvotes: 1

Views: 1610

Answers (2)

allnodcoms
allnodcoms

Reputation: 1262

2 options... and visible isn't one of them.

You could use

display: none;

in your CSS as suggested above. Setting display none doesn't show the element, or even make room for it on the page.

The better option (as in aesthetically pleasing) would be to use position, opacity, z-index and pointer-events. It's a bit more time consuming, but gives you the option to transition the element into place.

#Calendar1.show {
position: absolute;
z-index: 1000;
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s ease;
}

#Calendar1.hide {
opacity: 0;
pointer-events: none;
}

Then just change the class to show or hide the element...

Danny

Upvotes: 2

BhagyashriK
BhagyashriK

Reputation: 525

use 'display:none' , 'visibility:hidden' hides element but takes place Take a look at this link

Upvotes: 0

Related Questions