I have a visualforce page with a standard controller of a custom object, and within the page and inputfield that is tied to a custom date field of said object. I've dropped the VF page into the page layout for the custom object, and when the inputfield is focused, the date picker widget renders above the field, and is cut-off by the top of the VF page container:

date picker above

Now the strange thing is if I view the VF page by navigating directly to it via URL (ala na1.salesforce.com/apex/vfpagename?id=a0Th0000023KsdM) and focus the field there, the widget renders below as it typically does for date fields:

date picker below

Can anyone explain the discrepancy in behavior? I don't think it's an issue with the custom object and/or its page layout, because when I focus other date fields on the object's page layout, the widget renders below, as expected. I also have similar VF pages for other standard/custom objects, and have not had this issue on any inputfields associated with date fields. This is example of one of said pages as an in-line VF section on a page layout:

date picker okay

Edit for additional screen caps: When I inspect the HTML element of the widget where I'm having the issue, you can see the relative vertical position is negative:

date picker bad position

But when I inspect it on a page where it renders correctly, the vertical position is positive: date picker okay position

I assume the JavaScript function for the Datepicker widget is determining the positioning of the element, so why the positive/negative difference when the two fields are used in the same manner?

  • I tried a few things to at least start figuring this out - setting the z-index of the field, the body tag of the VF page and even the containing iframe via browser dev tools (which wouldn't be possible to do in practice, I don't think), and none of those brought the date picker above the containing page. May 6, 2016 at 13:42
  • If you increase the height the embedded VF page uses on the layout does it help? My first thought is maybe it doesn't think there is enough room below the field so it's trying to show above the field?
    – dBeltowski
    May 6, 2016 at 14:54

4 Answers 4


When you click on the date field, an onfocus event is fired that calls the Datepicker javascript function. This does a variety of things, but the relevant part to your question is that it uses the window object to determine the Date Picker's position.

An inline visualforce page on the page layout is displayed in an iframe. The iframe has its own window object, so it is using that to determine the position. When you examine the Visualforce page on it's own, it is using the regular height and width to determine the window size, and not the iframe's.

What I would suggest to do is play with the height setting on the inline visualforce page to ensure there is no cutoff. 200 pixels seems to be the minimum to me.

  • 1
    Thanks Mark. See edits and additional screen caps. My in-line VF page already has a height of 200 pixels. The problem is the widget is getting cut off by the TOP of the frame, so additional height will only add additional white space below, not above. Alternatively, I could put white space at the top of my VF page, but I don't think that would be a very good design choice for the end user.
    – kbentsen
    Mar 4, 2014 at 19:51
  • Agreed on the whitespace issue, not a good user experience. The alternatives I can see are: override the JS calculation of the position, or the inline css that is being set by the calculation, or try rolling with some type of pre-made date picker that you fire and have more control over the position. Mar 4, 2014 at 23:00
  • @kbentsen - did you ever get a satisfactory resolution to this issue? We did find that by making the VF container in the page layout editor taller, say, 300px, the date picker would decide to drop down instead of up. But our scenario is repeating rows, and so we need a consistent solution to get the date picker above the containing layout. May 6, 2016 at 13:46

Hi are u try this code in date time picker css. I m sure to this code because i have faced this problems.

   position: absolute;
   z-index: 10000!important;;

As you know, the position of date picker is being handled by Salesforce we can only control using override our CSS.


use below Style in your Visualforce page:-

    padding:0px 0px 0px 0px;


  • While I don't understand how this could be the proper CSS, I do think that this is the right direction. May 6, 2016 at 15:58

I have this problem (in my case was datepicker in Modal). The problem was that the #datePicker is created outside the modal/container.

I solved it using jQuery appendTo function to relocate the datepicker right next to the input tag.

Here is the working solution:


     <apex:inputField onclick="onFocusCalendar($(this));" value="{!obj.SchedStartTime}" />

jQuery function:

function onFocusCalendar(selector){

P.S. It is working with multiple datepickers.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .