I am programming a component that contains a modal window.

In the modal window, there is a calendar field.

<?php echo JHTML::_('calendar', null, 'birthdate', 'birthdate'); ?>

The position of the calendar popup seems to be relative to the body tag instead of the div of the modal windows.

Is it possible to make the calendar popup relative to the div of the modal windows? Or somehow calculate/add the top position of the modal windows to his own top position?


enter image description here

  • One solution may be that the position is fixed instead of absolute, I tried without any success: echo JHTML::calendar(null, 'birthdate', 'birthdate', '%Y-%m-%d', array('style' => 'position: fixed')); Oct 15 '14 at 7:16
  • Make sure the parent element has a relative position.
    – Lodder
    Oct 15 '14 at 8:01
  • You are right Lodder, the parent have a fixed position. But if I need a modal window, shouldn't the position be fixed? Oct 15 '14 at 8:10
  • There is body->div(model fixed position)->inner form-> containing relative positioned item. Is there a way to assign the calendar to a div in the inner form instead of the body? Oct 15 '14 at 8:13

It will be easier if I explain it with some code here. Ok so you modal has a fixed position, that perfectly fine.

Inside that, there should be a relative positioned element, and then inside that, you absolutely positioned calendar. The below shows what I mean.


<div class="modal">
    <div class="inner">
        <div class="calendar"></div>


.modal { position: fixed; }
.inner { position: relative; }
.calendar { position: absolute; }


To use Joomla's built in modal method, have a look at the answer provided by @Brent Friar here:


Hope this helps

  • It is not possible to override the calendar style because it is rendered on the fly by the javascript from the joomla framework: php.joomlademo.de/nav.html?media/system/js/… . An alternative of your solution may be is: jQuery("#IdOfTheGenerateButtonFromJHtml").click(function() { jQuery(".calendar").css("position", "fixed"); }); Oct 15 '14 at 8:19
  • It depends because your modal doesn't look like the default Joomla one. Would you be able to provide a link to your site as I might be able to provide you with a 1 line CSS fix
    – Lodder
    Oct 15 '14 at 8:20
  • I got the link to your site, but cannot see the modal as I need to be logged in :/
    – Lodder
    Oct 15 '14 at 8:23
  • You are again right about the modal window. I picked a jquery-ui plugin. I did not know there is an official joomla modal. Can you point me to an example or the documentation of the official modal box? I will gladly change the modal window to an official one. Oct 15 '14 at 8:24
  • I found this: spiralscripts.co.uk/Joomla-Tips/… . I will create a test form tomorrow. Thank you Lodder for your input. Oct 15 '14 at 8:26
  margin: 0 auto;
   position: absolute; 
    z-index: 1050;

enter image description here

  • Please always, always, always explain how/why your solution works. Why have you elected to use the magic number 1050? Would it be just as effective with 2? Please edit this post to be as educational as possible to researchers that don't have any idea how this solution works.
    – mickmackusa
    Apr 8 '19 at 3:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.