Я пытаюсь интегрировать таблицу данных прокрутки в шаблон SB Admin, на который ссылается https://startbootstrap.com/themes/sb-admin-2/
Это нормально на простой странице html.
Но я сталкиваюсь с произвольным пробелом, когда использование таблицы данных включено в шаблон SB Admin.
Я получил это:
Не могли бы вы сказать мне что я пропустил, зная, что мой html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:p="http://primefaces.org/ui">
<h:head>
<style>
body
{
background-image: url('../resources/icons/espingj.png')
}
</style>
</h:head>
<h:body>
<br/><br/><br/><br/>
<center>
<h:outputText value="Enquête de Satisfaction pour la classe " style="color:red;font-size: 20px"/>
<h:outputText value=" #{manageBean.connectedUser.classecourantet}" style="color:#0000ff;font-size: 20px"/>
</center>
<br/>
<div align="right">
<h:outputText value="Veuillez exprimé votre satisfaction:" style="color:blue;font-size: 13px;font-style: italic;"/>
<p:spacer width="5px"/>
<h:outputText value="I-" style="color:red;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputText value="Insatisfait" style="color:red;font-size: 13px;font-style: italic"/>
<p:spacer width="10px"/>
<h:outputText value="O-" style="color:grey;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputText value="Ordinaire" style="color:grey;font-size: 13px;font-style: italic"/>
<p:spacer width="10px"/>
<h:outputText value="S-" style="color:green;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputText value="Satisfait" style="color:green;font-size: 13px;font-style: italic"/>
<br/><br/>
<h:form id="drawDataTable">
<h:outputText value="(*) Merci de terminer votre procesus de satisfaction !."
rendered="#{manageBean.phase2 eq 'avoid'}" update="@all"
style="color:red;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputScript target="drawDataTable">
$(function()
{
synchronizeRowsHeight();
});
function synchronizeRowsHeight()
{
var $leftRows = $('.ui-datatable-frozenlayout-left').find('tr');
var $rightRows = $('.ui-datatable-frozenlayout-right').find('tr');
$leftRows.each(function(index)
{
var $leftRow = $(this);
var $leftHeight = $leftRow.innerHeight();
var $rightRow = $rightRows.eq(index);
var $rightHeight = $rightRow.innerHeight();
if ($rightHeight > $leftHeight)
{
$leftRow.innerHeight($rightHeight);
var diff = $rightHeight - $leftRow.innerHeight();
if (diff != 0)
$leftRow.innerHeight($rightHeight + diff);
$(window).trigger('resize');
}
$(".ui-datatable-scrollable-body").height(totalHeight-50);
})
}
</h:outputScript>
<p:dataTable var="criteria" value="#{manageBean.lnomFourthCriterions}" id="data4"
scrollable="true" scrollWidth="695" frozenColumns="1"
resizableColumns="true" styleClass="fixed-size"
tableStyle="width: auto; white-space: nowrap;">
<p:columnGroup type="frozenHeader" id="aa">
<p:row>
<p:column rowspan="2" headerText="Critères d'enseignement" escape="false" style="white-space:pre-line;"/>
</p:row>
</p:columnGroup>
<p:columnGroup type="scrollableHeader" id="bb">
<p:row>
<p:column colspan="#{manageBean.yearCount}" headerText="#{manageBean.lcs.get(18).value}" />
</p:row>
<p:row>
<ui:repeat value="#{manageBean.lms}" var="module">
<p:column headerText="#{manageBean.findModuleByCode(module)}" style="font-size: 10px;"/>
</ui:repeat>
</p:row>
</p:columnGroup>
<p:column width="10px" style="height: 50px">
<h:outputText value="#{criteria.libelleNom}" style="font-size: 12px"/>
</p:column>
<p:columns value="#{manageBean.lms}" var="module" width="1000px" style="font-size: 12px; height:50px">
<center>
<p:selectOneMenu styleClass="choices" required="true"
style="font-size: 11px;color:#737373;font-weight: normal;width:50%"
value="#{manageBean.selectedItemPriorityEnseignement}"
rendered="#{manageBean.getDisplaySelectedPriorityForEnseignement(criteria.abi.codeNom, module) eq null}">
<f:selectItems value="#{manageBean.getSelectItemsEnseignement(module)}"/>
<p:ajax update="drawDataTable" listener="#{manageBean.checkPriorityEns(criteria.abi.codeNom, manageBean.selectedItemPriorityEnseignement, module)}"/>
</p:selectOneMenu>
<p:spacer width="10px"/>
<h:outputText value="#{manageBean.getDisplaySelectedPriorityForEnseignement(criteria.abi.codeNom, module)}"
style="color:#0066ff;font-size: 13px;font-weight: bold;" rendered="#{manageBean.colorCellule(module) mod 2 == 0}"/>
<h:outputText value="#{manageBean.getDisplaySelectedPriorityForEnseignement(criteria.abi.codeNom, module)}"
style="color:#00ccff;font-size: 13px;font-weight: bold;" rendered="#{manageBean.colorCellule(module) mod 2 != 0}"/>
<p:spacer width="20px"/>
</center>
</p:columns>
</p:dataTable>
<center>
<br/><br/><br/>
<h:panelGrid columns="2">
<h:column>
<p:commandLink id="pre" action="secondPhase?faces-redirect=true">
<p:graphicImage value="/resources/icons/previous.png" style="width: 62px;height: 43px;"/>
</p:commandLink>
<p:tooltip for="pre" value="Précédant" style="font-size: 10px;" position="left"/>
</h:column>
<h:column>
<p:commandLink id="sui" ajax="true">
<p:graphicImage value="/resources/icons/next.png" style="width: 50px;height: 30px;"/>
<p:ajax update="@all" listener="#{manageBean.validatePhase2Step()}"/>
</p:commandLink>
<p:tooltip for="sui" value="Suivant" style="font-size: 10px;" position="right"/>
</h:column>
</h:panelGrid>
</center>
<br/><br/><br/>
</h:form>
</div>
</h:body>
</html>