jsf-2 - 別のタブでJsf列のサイズが変更されない

Question

以下のコードに示すように、2 つのタブを持つ TabView があります。私の問題は、最初の dataTable だけがサイズ変更可能な列を持つことですが、id がコメントと achivedComments である両方の dataTables に設定しました。dataTables を移動すると、最初の列だけがサイズ変更されます。ブラウザでviewSourceを使用してソースを確認すると、2番目ではなく最初のdataTableにのみあることに気付きました。両方の dataTable を同じタブに配置すると、両方の dataTable にサイズ変更可能な列があることにも気付きます。つまり、正しく機能します。

<p:dialog closable="true" dynamic="true" header="#{msg['00156']}"
    widgetVar="viewCommentsDlg" width="800" modal="true" showEffect="drop"
    hideEffect="drop">
    <h:form id="viewCommentsForm">
        <p:growl showDetail="true" life="2500" />
        <p:tabView>
            <p:contextMenu for="comments">
                <p:menuitem actionListener="#{comment.deleteComment}"
                    value="#{msg['00232']}"
                    update=":viewCommentsForm :ietpViewMenuBarForm:ietpViewMenuBar"
                    icon="ui-icon-trash" global="false"/>
            </p:contextMenu>
            <p:tab title="#{msg['01094']}"
                disabled="#{!comment.commentsAvailable}">
                <p:dataTable scrollable="true" scrollHeight="340"
                    rowKey="#{c.messageID}" value="#{comment.commentList}" var="c"
                    resizableColumns="true" selection="#{comment.selectedComment}"
                    selectionMode="single" sortBy="#{c.messageID}" id="comments">

                    <p:ajax event="rowToggle" global="false"/>

                    <p:column style="width: 20px">
                        <p:rowToggler />
                    </p:column>
                    <p:column headerText="#{msg['00152']}" sortBy="#{c.messageID}">
                        <h:outputText value="#{c.messageID}" />
                    </p:column>
                    <p:column headerText="#{msg['00626']}" sortBy="#{c.originator}">
                        <h:outputText value="#{c.originator}" />
                    </p:column>

                    <p:rowExpansion>
                        <h:outputText value="#{c.message}" />
                    </p:rowExpansion>

                </p:dataTable>
            </p:tab>
            <p:tab title="#{msg['01096']}"
                disabled="#{comment.viewArchiveCommentDisabled}">
                <p:dataTable scrollable="true" scrollHeight="340"
                    rowKey="#{ac.messageID}" value="#{comment.archivedCommentList}"
                    var="ac" resizableColumns="true" selection="#{comment.selectedComment}"
                    selectionMode="single" sortBy="#{ac.messageID}"
                    id="archivedComments">

                    <p:column style="width: 20px">
                        <p:rowToggler />
                    </p:column>
                    <p:column headerText="#{msg['00152']}" sortBy="#{ac.messageID}">
                        <h:outputText value="#{ac.messageID}" />
                    </p:column>
                    <p:column headerText="#{msg['00626']}" sortBy="#{ac.originator}">
                        <h:outputText value="#{ac.originator}" />
                    </p:column>

                    <p:rowExpansion>
                        <h:outputText value="#{ac.message}" />
                    </p:rowExpansion>
                </p:dataTable>
            </p:tab>
        </p:tabView>

        <p:commandButton onclick="viewCommentsDlg.hide();"
            style="float: righ`enter code here`t; margin-top: 10px; width: 80px; margin-bottom: 10px"
            type="button" value="#{msg['00138']}" />

    </h:form>
</p:dialog>

Answer 1

p:tab から属性を削除disabledし、両方のテーブルを確認します