show calendar on top of other elements

Question

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

I don't actually have any javascript function, I just show and hide it with the property "Visible", but it takes the space in the page anyway. I'd like it to appear on top of the other items when I open it up — Gino Perla, Feb 10 '15 at 09:14
ketan, position:abolute works like a charm. `.top{ position: absolute; top: 27em; }` I put the calendar into a div with the "top" css class. — Gino Perla, Feb 10 '15 at 09:21

score 2 · Accepted Answer · answered Feb 10 '15 at 09:31

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

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

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

edited May 23 '17 at 12:20

Community

1
1

answered Feb 10 '15 at 09:18

BhagyashriK

525
2
16

show calendar on top of other elements

2 Answers2