scrollable datatable renders an extra column

[kars906]

Hi

I am using rich faces 3.3.2 scrollable datatable .i have three columns to render i get an extra column .i have checked this in rich faces demo also

here is the code

<rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px"
    width="700px" id="carList" rows="40" columnClasses="col"
    value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
    binding="#{dataTableScrollerBean.table}"
    sortOrder="#{dataTableScrollerBean.order}"
    selection="#{dataTableScrollerBean.selection}">

    <rich:column id="make">
     <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet>
     <h:outputText value="#{category.make}" />
    </rich:column>
    <rich:column id="model">
     <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet>
     <h:outputText value="#{category.model}" />
    </rich:column>
    <rich:column id="price">
     <f:facet name="header"><h:outputText styleClass="headerText" value="Price" /></f:facet>
     <h:outputText value="#{category.price}" />
    </rich:column>
  
   </rich:scrollableDataTable>

i have only 3 columns but i get an extra column rendered . iam attaching the bmp file please have a look and help me

[ilya_shaikovsky]

seems wrong image

Extra column added because of resizing feature. You could restyle it using css. (turning borders for this column off)

[kars906]

Hi

Thanks for the previous reply  

Can u please just check the code i have put.i have 3 columns .i didnt resize it  .You can reproduce that extra column with the code i have posted

it give that extra column as it looks in image.

i have tried to do this for that extra column it didnt worked

<style>
   .scrolls{
    width:300px;
    height:200px;
    overflow:auto;
   }
  
   .col {
width: 100px;
                  }
     
   .col4 {
width: 0px;
border:0px;
                
     }
  </style>
  <h:form>
   <rich:spacer height="30" />
   <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px"
    width="700px" id="carList" rows="40" columnClasses="col,col,col4"
    value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
    binding="#{dataTableScrollerBean.table}"
    sortOrder="#{dataTableScrollerBean.order}"
    selection="#{dataTableScrollerBean.selection}">

    <rich:column id="make">
     <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet>
     <h:outputText value="#{category.make}" />
    </rich:column>
    <rich:column id="model">
     <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet>
     <h:outputText value="#{category.model}" />
    </rich:column>
      
   </rich:scrollableDataTable>

</h:form>

</ui:composition>

still extra column persists

can you please help me with this.

[nbelaevski]

This column is used to fill table space when overall width of columns is not enough to cover table space. When columns are resized, they are taking space from this extra column.

So, set width for the first & second columns to the appropriate values.