DialT 내부의 DataTable 결과가 잘못되었습니다.

p:dataTable을 모달 p:dialog (삭제해야 할 항목)으로 표시하려고합니다. 첨부 된 예제와 비슷한 기능을 수행하면 대화 상자가 100 % 너비로 표시됩니다. 어떻게 이것을 피할 수 있습니까? p:datatable이 없으면 대화 상자의 내용에 따라 렌더링됩니다.DialT 내부의 DataTable 결과가 잘못되었습니다.

최소 예 :

<p:dialog header="Example" widgetVar="exampleDlg" closable="true" 
      resizable="false" appendTo="@(body)" modal="true"> 
    <h:form id="exampleForm"> 
     <p:dataTable emptyMessage="Even an empty DataTale"> 
     </p:dataTable> 
    </h:form> 
</p:dialog>

내가 Primefaces에 5.1 스냅 샷 합니다만, 5.0는 동일합니다. Afterdark, 부트 스트랩 및 기본 테마를 시도하고 항상 동일한 문제가 발생했습니다.

출처

2014-10-16 DieselPower

width: 100%;과 같은 확장/비율 너비로 스타일이 지정된 데이터 테이블이 있으므로 대화 상자가 그에 따라 데이터 테이블의 너비를 나타 내기 위해 모든 공간을 차지합니다.

하면 대화를 폭 보내기 : 또한

<p:dialog header="Example" widgetVar="exampleDlg" closable="true" 
         resizable="false" appendTo="@(body)" modal="true" width="50%">

<p:dialog header="Example" widgetVar="exampleDlg" closable="true" 
         resizable="false" appendTo="@(body)" modal="true" width="400">

를 또는 DataTable을 고정 폭을 제공 : 그래서 당신은 그것을 해결하기 위해 두 가지 옵션이 있습니다

<p:dataTable emptyMessage="Even an empty DataTale" style="width: 300px;">

출처

2014-10-16 08:08:50 mrganser

맞습니다. 선택란의 너비는 16px이지만 다른 모든 요소의 스타일은 지정되지 않았습니다. 그리고 최소한의 예제는 똑같이 행동합니다. 나는 당신의 첫 번째 힌트와 그 괜찮은 것을 사용했습니다 ... 나는 내용이 더 커지면 어떻게되는지보아야합니다. 나는 너비를 설정하지 않고 기본 동작 ("너비 : 자동")에 의존하는 것으로 충분하다고 생각했습니다. (Thx now far :) – DieselPower

문제를 해결하는 우아한 방법 (최선이 아니라면)은 CSS Media Queries을 사용하는 것입니다. 클래스를 사용하여 데이터 테이블에 "적합"할 수 있습니다. 예를 들어

.xhtml

<p:dialog header="My Dialog Name" styleClass="my-dialog-class"> 
    <h:form> 
     <p:dataTable id="myTable"> 
      .... 
     </p:dataTable> 
    </form> 
</p:dialog>

.CSS

@media(min-width: 320px) { 
    .my-dialog-class { 
     width: 318px !important; 
    } 
} 
@media(min-width: 360px) { 
    .my-dialog-class { 
     width: 358px !important; 
    } 
}

여기에 우리가 항상 318px있을 것이다 우리의 대화 (320) 사이에 360 픽셀을 가정합니다.

출처

2016-08-26 20:47:22

DialT 내부의 DataTable 결과가 잘못되었습니다.

답변

관련 문제