4

I have a custom item edit form and I have a couple of DateTime properties that has to be filled at the bottom of the form (using datepicker):

enter image description here

So when I click the mini calendar icon to choose the date, it overflows the form and is under the dialog frame:

enter image description here

Ofcourse, I could just expand the height of the form itself and leave some more blank space at the end, but I would like to show the datepicker "on top" of the whole dialog, something like this:

enter image description here

Is this possible?

I've tried messing around with z-index, but it never overlaps the dialog...

Any ideas guys? Thanks in advance!

4
+100

I did try to add 100 pixels to the modal dialogs height through jQuery once one of the calendar images are clicked (to open the datepicker) and then disable the jQuery to prevent any more height to be added to the dialog.

Then I set the CSS class ms-dialog body to be transparent to make the modal dialog look like it has the initial height. This results in the feeling that the datepicker pops up outside the modal dialog. (Try to add the code without the CSS to see what I'm talking about).

Add this piece of code using a Script Editor Webpart or Content Editor webpart to the New and Edit form. You can store the reference to the jQuery file locally in SharePoint if you like to.

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".ms-dtinput > a").one('click', function(){
       var dlgFrameHeight = $('.ms-dlgFrame', window.parent.document).height() + 100;
       $('.ms-dlgFrame', window.parent.document).css('height', dlgFrameHeight);
       $(".ms-dtinput > a").off();
    });
});
</script>

<style type="text/css">
.ms-dialog body {
    background-color: transparent;
}
</style>

I'm not very good at jQuery so I'm sure that there is dozens of improvements that can be made to the code, but it works fine for me using SharePoint 2013.

This is the result i get.

enter image description here

| improve this answer | |
  • Perfect! Exactly what I was looking for and works great. Thanks :) – Gintas K Sep 25 '17 at 11:33
  • Glad to hear! :) – Christoffer Sep 25 '17 at 11:33
  • I can only reward you with the bounty in 7 hours :) – Gintas K Sep 25 '17 at 11:34
  • No problem. I tested the code in Chrome, IE 11 and Edge, but can't test in Firefox and Safari, so if that's a requirement I recommend to test in those browsers to! – Christoffer Sep 25 '17 at 11:36
1

If you open your modal dialog with SharePoint JavaScript API (JSOM) method like SP.UI.ModalDialog.showModalDialog, which I suppose you do, then it's not possible.

JSOM opens modal dialog page in an IFRAME inside parent page. A page inside IFRAME is a separate HTML document and can not intersect in any way with parent HTML document.

| improve this answer | |
  • Yes, but @Christoffer's solution works with no problem :) – Gintas K Sep 25 '17 at 11:34
  • He is emulating the parent page background inside the modal dialog. Very nice trick. – Rustam Sep 25 '17 at 11:41
  • So if we want to use SharePoint datepicker in SP.UI.ModalDialog.showModalDialog, how do we do that? – Harsh Jul 5 '18 at 5:40

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.