Member Avatar for gani

hi friends.
i am using jsp.........i have designed a jsp web page where one of the option button on click displays calendar.... but the problem is when i click that button...page size is changing... i mean the details of the page which r in sentre r shifting towards extreme left..i want the page to be as it is even when i click that calendar button..please help me.
thanks in advance

  • 3 Contributors
  • 2 Replies
  • 102 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by mandar-seo

Dani AI

Generated

A few likely causes and quick fixes for the page shift you describe.

When the calendar is added inline it changes the document flow (new height/width, table cell resizing, or a new vertical scrollbar), which moves centered content. First diagnostic steps: open your browser dev tools, click the button, watch the DOM for the calendar element being added or moved; toggle its display in the inspector to confirm the calendar is the trigger; and check whether the vertical scrollbar appears/disappears when the calendar opens.

Two robust fixes that avoid layout shifts:

  • Render the calendar as an overlay so it does not occupy normal flow. Put the calendar element outside the layout flow (position it absolutely or fixed, or append it to the document body) and show/hide it instead of inserting inline.
  • Prevent scrollbar width changes by forcing a persistent vertical scrollbar if the page sometimes gains one: html { overflow-y: scroll; }. That avoids the page width changing when content length changes.

Example (minimal) pattern to show/hide an overlay calendar:

.calendar-wrapper { position: relative; display: inline-block; }
.calendar-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
}
.calendar-popup.visible { display: block; }
document.querySelector('#openBtn').addEventListener('click', function () {
  document.querySelector('.calendar-popup').classList.toggle('visible');
});

If the page uses table-based layout, inserted content can reflow table cells — that makes overlays even more important. As suggested, a link or a live example helps diagnose exact behavior. pointed to reserving space; that can work, but an overlay is usually cleaner and more reliable across browsers. Test changes in dev tools and across browsers, and ensure a standards DOCTYPE so box-model behavior is predictable.

Recommended Answers

All 2 Replies

Member Avatar for peter_budo

can you please provide a link to your site, so we can see it?
( sometimes it better see it once, then hear about it tousand times)

Member Avatar for mandar-seo

Are you using table for desgning? If yes and even if the problem is arising then use <IMG> tag. This will allocate the definite space for your calender code on the page and will not run on the other space of other objects on the webpage.

With regards,

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.