2014-06-23 8 views
5

[Primefaces 5.0]कैसे प्रतिशत अधिकतम-ऊंचाई

के साथ एक पैनल में एक datatable फिट करने के लिए मैं एक tabview कि एक datatable रखती है। टैब के आधार पर, डेटाटेबल अलग-अलग डेटा से भरा होता है (यानी कॉलम और पंक्तियों की एक अलग संख्या)। निम्न सेटअप डेटा को ठीक से संभालता है, लेकिन इससे कोई फर्क नहीं पड़ता कि मैंने पैनल, टैब या डेटाटेबल पर अधिकतम-ऊंचाई बाधा डाली है, ऐसा लगता है कि यह स्क्रीन के उस प्रतिशत को बाधित नहीं करता है। यदि मैं किसी विशेष मान (उदा। 300 पीएक्स) पर बाधा सेट करता हूं, तो यह काम करता है, लेकिन मैं नहीं चाहता।

मूल रूप से: मुझे एक डेटाटेबल चाहिए जो इस सामग्री तक फिट होगा कि यह 30% स्क्रीन लेता है। इस बिंदु पर, इसे स्क्रॉल करना चाहिए।

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
    <div style="width: 10%;float: left"> ... </div> 
    <div style="width: 90%;float: right"> 
      <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;max-height: 30%;margin-bottom: 1%"> 
       <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
        <p:tab title="#{table.tableName}" > 
         <p:dataTable var="row" 
          value="#{pageBean.tableData[table.tableName].data}" 
          resizableColumns="true"> 
          <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
           var="column" columnIndexVar="columnIndex"> 
           <f:facet name="header"> 
            <p:outputLabel value="#{column}"/> 
           </f:facet> 
           <p:outputLabel value="#{row[columnIndex]}"/> 
          </p:columns> 
         </p:dataTable> 
        </p:tab> 
       </p:tabView> 
      </p:panel> 
      ... 
    </div> 
    </body> 

उत्तर

0
आप

cas datatable के लिए ScrollWidth और ScrollHeight का उपयोग करें। इस उद्देश्य के लिए तीन विकल्प हैं। उदाहरण के लिए:

scrollHeight="30%" 
scrollWidth="30%" 
scrollable="true" 

इस विधि से आप अपने डेटाटेबल आकार को नियंत्रित कर सकते हैं।

p.s: आप अपने प्राइमफेस संस्करण नहीं कहते हैं।

+1

इस समाधान के साथ समस्या यह है कि मैं datatable का एक विशेष प्रतिशत करने के लिए शामिल किया जा करना चाहते हैं स्क्रीन - इसमें से अधिकतम 30%। हालांकि, स्क्रॉल हाइट बाधा का उपयोग इस दिन के रूप में * डेटा * के प्रतिशत तक सीमित है। चूंकि पंक्तियों की संख्या मेरे पास पत्थर में स्थापित नहीं होगी, इससे मेरी समस्या हल नहीं होती है। मैंने अपने प्रश्न में एक बेहतर विवरण जोड़ा। – user2303325

0

आप इस तरह अधिकतम-ऊंचाई के आकार पर "VH" का उपयोग कर सकते हैं, व्यूपोर्ट ऊंचाई के लिए:

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
<div style="width: 10%;float: left"> ... </div> 
<div style="width: 90%;float: right"> 
     <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;margin-bottom: 1%"> 
      <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
       <p:tab title="#{table.tableName}" > 
        <p:dataTable var="row" 
         value="#{pageBean.tableData[table.tableName].data}" 
         resizableColumns="true" style="max-height: 30vh;"> 
         <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
          var="column" columnIndexVar="columnIndex"> 
          <f:facet name="header"> 
           <p:outputLabel value="#{column}"/> 
          </f:facet> 
          <p:outputLabel value="#{row[columnIndex]}"/> 
         </p:columns> 
        </p:dataTable> 
       </p:tab> 
      </p:tabView> 
     </p:panel> 
     ... 
</div> 
</body> 
संबंधित मुद्दे