CODEWITHSUNDEEP
javacssjsfprimefacesdatatable
JiboOne
JiboOne

Reputation: 1548

Fix p:dataTable width in PrimeFaces

I want to fix width fo my datatable.

I'm using <p:dataTable> </p:dataTable> of PrimeFaces 3.2.

How can I fix PrimeFace's DataTable width with css?

I've already tried

style="table-layout: fixed; width:100px;"

But it doesn't work

Adding full code of DataTable

 <p:dataTable id="eventTbl" var="e" value="#{eventBean.eventList}" style="table-layout: fixed; width:100px;"
    paginator="true" rows="20" lazy="true"
    paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
    dynamic="true">
    <p:column>
        <p:commandButton id="selectButton" update=":form:display"
            action="#{eventBean.getEventDetails(e.eventNum)}"
            oncomplete="eventDialog.show()" icon="ui-icon-search"
            title="View">
        </p:commandButton>
    </p:column>
    <p:column headerText="Event Type" filterBy="#{e.eventType}">
        <h:outputText value="#{e.eventType}" />
    </p:column>
    <p:column headerText="Order Id" filterBy="#{e.orderId}">
        <h:outputText value="#{e.orderId}" />
    </p:column>
    <p:column headerText="Status" filterBy="#{tr.status}">
        <h:outputText value="#{tr.status}" />
    </p:column>
    <p:column headerText="Event Date" filterBy="#{e.eventDate}">
        <h:outputText value="#{e.eventDate}" />
    </p:column>
    <p:column headerText="Event Number" filterBy="#{e.eventNum}">
        <h:outputText value="#{e.eventNum}" />
    </p:column>
    <p:column headerText="Request Number" filterBy="#{e.requestNum}">
        <h:outputText value="#{e.requestNum}" />
    </p:column>
    <p:column headerText="Masked Pan" filterBy="#{e.maskedPan}">
        <h:outputText value="#{e.maskedPan}" />
    </p:column>
    <p:column headerText="Card Name" filterBy="#{e.cardName}">
        <h:outputText value="#{e.cardName}" />
    </p:column>
    <p:column headerText="Reference Number" filterBy="#{e.refNumb}">
        <h:outputText value="#{e.refNumb}" />
    </p:column>
</p:dataTable>

Upvotes: 0

Views: 5163

Answers (3)

Rence Abishek
Rence Abishek

Reputation: 413

There could be two possible way to solve or find this issue.

  1. Please check whether you have used your colspan size for datatable. for example, if your form colspan size is 10, make sure you have mentioned colspan size as 10 in your datatable.
  2. Use styleClass instead of style or inherit the values as like below

.tableSize{ table-layout:fixed !important; width:100% !important; }

use styleClass="tableSize"

Upvotes: 0

Cagatay Civici
Cagatay Civici

Reputation: 6504

Use tableStyle instead of style.

Upvotes: 1

mooonli
mooonli

Reputation: 2393

I'm pretty sure you have some min-widths or width attributes on the style classes of input and button form eleements.

Check that with firebug (select one of those input fields and check the styles attached to it for a min-width or width attribute).

If you have any of those, try to remove or resize them, because their width will be applied, doesnt matter what width you set for their parent (table) element.

Greets Marc

Upvotes: 0

Related Questions