Прокручиваемая область в панели «Поверхности»

Я использую макет главной страницы Primefaces, и я хочу вставить в центральный блок панель (p:panel) с прокручиваемым контентом (и фиксированным заголовком), но это не сработало. Я пробовал:Прокручиваемая область в панели «Поверхности»

делает содержание панели прокрутки
вставляя содержание в p:scrollPanel
вставив содержимое в прокруткой p:outputPanel

Ни одно из этих решений работали. Я думаю, что основная проблема заключается в том, что я не могу установить фиксированную высоту/ширину, потому что содержимое центрального блока должно принимать все «оставшиеся размеры». Кто-то может дать мне подсказку?

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:xyrion="http://www.rohag.ch/xyrion/jsf" 
     xmlns:p="http://primefaces.org/ui"> 
<h:head> 

    <h:outputStylesheet library="css" name="test.css"/> 

</h:head> 
<h:body> 


    <p:layout fullPage="true"> 

     <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true"> 
      <h:outputText value="North unit content."/> 
     </p:layoutUnit> 

     <p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true"> 
      <h:outputText value="South unit content."/> 
     </p:layoutUnit> 

     <p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true"> 

     </p:layoutUnit> 

     <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" 
         effect="drop"> 
      <h:outputText value="Right unit content."/> 
     </p:layoutUnit> 


     <p:layoutUnit position="center"> 

      <p:panel header="Title" toggleable="false" closable="false"> 

       <p:outputPanel style="display:block; width:calc(100% - 20px); height:calc(100% - 20px); overflow: auto"> 

        <table style="width:1000px"> 
         <tbody> 
         <tr> 
          <th>Firstname</th> 
          <th>Lastname</th> 
          <th>Age</th> 
         </tr> 
         <tr> 
          <td>Jill</td> 
          <td>Smith</td> 
          <td>50</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 


         </tbody> 
        </table> 
       </p:outputPanel> 
      </p:panel> 


     </p:layoutUnit> 

    </p:layout> 


</h:body> 
</html>

layout.css

.ui-layout-center .ui-layout-unit-content { 
         overflow:hidden !important; 
        }

источник

2016-10-06 Zardo

лично мне не нравится "UI-макет" шаблоны. Шаблон можно сделать лучше и с большим контролем, используя только собственный CSS, возможно, Grid CSS и XHTML.

Для вашей проблемы я хотел бы сделать это:

Установите panel компонент высоты до 100% (вы можете увидеть, что ui-layout-unit-content имеют расчетную высоту и высоту панели будет относительно этого):

#your-panel-id.ui-panel { height: 100% }
Установить высоту подъема panel содержания до 100%:

#your-panel-id .ui-panel-content { height: 100% }
Установите outputPanel высоту и переполнения:

#your-outputPanel-id { height: calc(100% - someSpecificHeight); overflow: auto; }

Примечание: "someSpecificHeight" - это по отношению к прикладной CSS. Я тестировал на моем (я использую шаблон Модены), и он был больше, чем 50px, чтобы все элементы таблицы были видны в прокрутке.

Надеюсь, это сработает для вас! :)

источник

2016-10-10 14:47:35

Я впечатлен, это работает, очень! Я также посмотрю на Grid CSS – Zardo

Добро пожаловать. :) –

Прокручиваемая область в панели «Поверхности»

ответ

Смежные вопросы