Overflowを指定した際に日付ピッカーの表示位置がずれる時は

こんな時

こうしたいのに

こうなって困っちゃう

問題

日付ピッカーの表示位置を計算する際に、位置の基準となるエレメントを正しく指定できていないため起こる現象です。

対処法

基準としたいエレメントにpositionスタイルを指定します。

LognWidthTable.vfp

<apex:page standardController="Account">
    <apex:pageBlock title="My Content">
        <apex:form>
            <!-- これだと日付ピッカーが飛んで行く
            <apex:outputPanel  layout="block" style="overflow:auto;width:300px;height:250px;" >-->

            <!-- これだと日付ピッカーが正しい位置にくる -->
            <apex:outputPanel  layout="block" style="overflow:auto;width:300px;height:250px;position:relative;" >
                <apex:pageBlockTable value="{!account.Contacts}" var="item">
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/>  
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column headerValue="誕生日">
                        <apex:outputField value="{!item.Birthdate}">
                            <apex:inlineEditSupport event="ondblclick" showOnEdit="update"/>
                        </apex:outputField>    
                    </apex:column>
                </apex:pageBlockTable> 
            </apex:outputPanel>
        </apex:form>
    </apex:pageBlock> 
</apex:page>