Primefaces Datatable - 4.0

Question

Я использовал Primefaces 3.4. Недавно я обновился до primefaces 4.0.

Ниже код работал нормально в 3.4. Однако после того, как я обновил до 4.0, заголовок фасет таблицы не выравнивается с заголовками столбцов.

<p:dataTable id="itunesTopSongsDt" 
      var="itunesTopSongsDtV" 
      value="#{applicationAccessMb.itunesTopSongsList}" 
      resizableColumns="false" 
      style="width: 600px; float: right; margin-right: 10px; margin-top: 0px;"> 


            <f:facet name="header"> 
             <p:row> 
              <p:column colspan="3"> 
               <p:outputPanel style="float:left;"> 
                <h:outputText id="itunesTopSongsDtHdr" 
                    value="iTunes Top 10 Songs"/> 
               </p:outputPanel> 
              </p:column> 

              <p:column>           
               <p:outputPanel style="float:right;">  
                <p:selectOneMenu id="songsChartCountrySom" 
                     value="#{applicationAccessMb.songChartCountry}" 
                     effect="fade" 
                     style="text-align: left"> 

                 <f:selectItems value="#{applicationAccessMb.reportCountry}"/> 

                 <p:ajax process="songsChartCountrySom" 
                   event="change" 
                   listener="#{applicationAccessMb.getItunesTopSongsForCountry}" 
                   update="itunesTopSongsDt"/> 

                </p:selectOneMenu> 
               </p:outputPanel> 
              </p:column> 

             </p:row> 
            </f:facet>                

            <p:column headerText="Rank" 
               width="30" 
               style="text-align: center;"> 
             <h:outputText value = "#{itunesTopSongsDtV.rank}"/> 
            </p:column> 

            <p:column width="45"> 
             <p:graphicImage url="#{itunesTopSongsDtV.imagePath}" width="45" height="45"/> 
            </p:column> 

            <p:column headerText="Artist" 
               width="200"> 
             <h:outputText value = "#{itunesTopSongsDtV.artist}" 
                 rendered="#{!itunesTopSongsDtV.itunesArtistLinkFound}"/> 
             <h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesArtistLink}', 
                      '', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;" 
                 rendered="#{itunesTopSongsDtV.itunesArtistLinkFound}"> 
              <h:outputText value = "#{itunesTopSongsDtV.artist}"/> 
             </h:outputLink>         
            </p:column> 

            <p:column headerText="Title" 
               width="250"> 
             <h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesLink}', 
                      '', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;"> 
              <h:outputText value = "#{itunesTopSongsDtV.title}"/> 
             </h:outputLink> 
            </p:column> 

           </p:dataTable> 

Смотрите фотографии. Есть ли настройки мне не хватает, которые мне нужно сделать в primefaces 4.0

Благодаря Чираг

Answer 1

Очень простое решение будет замените OutputPanel на простой div с выровнением

<div align="left"> 
    <h:outputText id="itunesTopSongsDtHdr" value="iTunes Top 10 Songs"/> 
</div> 

Answer 2

Primefaces Datatable - 4,0

Remove all style 

First Specified table size i.e 700px; 

e.g <style="width:700px;float:left;"> 

или

Specified div 

<div style="width:700px;"> 

    <div>Write your Top ten album here </div> 

    <div>Write datatable here </div> 

</div>