富：extendedDataTable在富：面板被壓縮

我想在面板內使用extendedDataTable。我使用下面的代碼：富：extendedDataTable在富：面板被壓縮

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<ui:composition 
    xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 

    <f:view> 
     <h:head></h:head> 
     <h:body> 
      <h:form id="form"> 
       <rich:panel style="width:400px"> 
        <rich:extendedDataTable 
          value="#{mitarbeiterBean.mitarbeiter}" 
          var="mitarbeiter" 
          style="width: 100%;"> 
         <rich:column sortBy="#{mitarbeiter.vorname}"> 
          <f:facet name="header"> 
           <h:outputText value="Vorname" /> 
          </f:facet> 
          <h:outputText value="#{mitarbeiter.vorname}" /> 
         </rich:column> 

         <rich:column sortBy="#{mitarbeiter.nachname}"> 
          <f:facet name="header"> 
           <h:outputText value="Nachname" /> 
          </f:facet> 
          <h:outputText value="#{mitarbeiter.nachname}" /> 
         </rich:column> 
        </rich:extendedDataTable> 
       </rich:panel> 
      </h:form> 
     </h:body> 
    </f:view> 
</ui:composition>

的支持bean：

import javax.inject.Named; 

@Named 
public class MitarbeiterBean { 
    public class Mitarbeiter { 
     private String vorname; 
     private String nachname; 

     public Mitarbeiter (String vorname, String nachname) { 
      this.vorname= vorname; 
      this.nachname= nachname; 
     } 

     public String getVorname() { 
      return vorname; 
     } 

     public void setVorname (String vorname) { 
      this.vorname= vorname; 
     } 

     public String getNachname() { 
      return nachname; 
     } 

     public void setNachname (String nachname) { 
      this.nachname= nachname; 
     } 
    } 

    public Mitarbeiter[] getMitarbeiter() { 
     return new Mitarbeiter[] { 
      new Mitarbeiter("Hans", "Müller"), 
      new Mitarbeiter("Heiri", "Meier"), 
      new Mitarbeiter("Max", "Mustermann"), 
      new Mitarbeiter("Susi", "Sorgenlos") 
     }; 
    } 
}

表不使用它的空間被壓縮到左邊。我幾乎得到我想要的以下CSS：

.rf-edt-tbl { 
    width: 100%; 
} 

.rf-edt-tbl tr td { 
    width: 50%; 
} 

.rf-edt-tbl tr td div { 
    width: auto; 
}

但是，當滾動條出現時，表格的標題和內容變得不一致。

如何讓我的桌子看起來正確？

來源

2012-04-03 Sandro

嘗試使用outputPanel而不是面板 – 2012-04-03 14:01:57

感謝您的評論。你意味着什麼樣的輸出面板？我試過a4j：outputPanel，但沒有成功。該面板橫跨整個頁面的寬度，但表格仍然被壓縮。 – Sandro 2012-04-03 15:04:25

您是否在面板中使用過'style =「width：100％」？是的，我建議使用'a4j：outputPanel'。 – 2012-04-03 15:06:25

使用這種風格在你的豐富：extendedDataTable標籤

style="table-layout:fixed;"

來源

2012-04-13 12:06:59

謝謝你的回答，我試過了，但它沒有改變任何東西。 – Sandro 2012-04-16 12:16:04

好的，我認爲Usman是正確的，但我們需要更多的線索......見上文。 – 2012-04-16 14:31:21

rich：extendedDataTable具有固定寬度，所以我們必須根據情況設置寬度，刪除rich：panel寬度。在你的Css中刪除這個類風格的「.rf-edt-tbl tr td」請使用google檢查html源代碼，檢查瀏覽器中數據表的實際寬度是多少。 – 2012-04-16 16:40:06

-1

我有同樣的問題，我將提供時提供額外信息，它提供了一些線索：

每個單元具有以下附加類（可能與列大小調整有關）：

.rf-edt-c-j_idt162 { 
    width: 100px; 
}

j_idt後面的數字每列都會發生變化。該類正在固定列寬，壓縮列。

它覆蓋了.rf-edt-c和.rf-edt-hdr-c，所以我不能使用這些設置特定的寬度。

<div class="rf-edt-c rf-edt-c-j_idt162"...

如果我設置的是這樣的列寬：

.rf-edt TABLE { 
    width:100; 
} 
.rf-edt DIV { 
    width: 100%; 
}

然後柱擴大，以填補該地區，但標題和內容的對齊錯，因爲頭部和內容在不同的表。

來源

2012-05-31 13:11:48 fguirao

我沒有清楚地解釋它，還是僅僅是沒有什麼可以做的呢？ – fguirao 2012-06-11 09:22:32

這是一個答案？一個問題？還有別的嗎？ – alestanis 2012-10-20 13:50:50

富：extendedDataTable在富：面板被壓縮

回答

相關問題