こんな時

こうしたいのに

こうなって困っちゃう

問題

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

対処法

基準としたいエレメントに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>