Primeng: DataTable with explicit widths causes headers and table cells to misalign

[gatapia]

The following table:

<p-dataTable [value]="entities" 
      [lazy]="true" [totalRecords]="totrows" (onLazyLoad)="refresh($event, table)"
      selectionMode="single" (onRowSelect)="edit($event)" 
      sortField="ContactName" [sortOrder]="1"
      [globalFilter]="globalfilter"
      scrollable="true" [scrollHeight]="winheight" #table>    
    <p-column [style]="{'width':'300px'}" field="Company" header="Company" [sortable]="true" [filter]="true"></p-column>
    <p-column field="ContactName" header="Name" [sortable]="true" [filter]="true"></p-column>
    <p-column [style]="{'width':'250px'}" field="Email" header="Email" [sortable]="true" [filter]="true"></p-column>    
    <p-column [style]="{'width':'80px'}" field="IsKeyContact" header="Key Contact" [sortable]="true" [filter]="true">
      <template let-entity="rowData">{{entity.IsKeyContact ? "Yes" : "No"}}</template>
    </p-column>
    <p-column [style]="{'width':'80px'}" field="DateNextFollowUp" header="Follow Up" [sortable]="true" [filter]="true"></p-column>
  </p-dataTable>  

(And any other table that uses explicit widths) causes the following layout issues:

I am using the Modena theme, so not sure if it could be this. There is no CSS interfearing with the table (I assume given encapsulation and my brief inspection appears to support this).

[cagataycivici]

Can you also add width to ContactName column as well.

[gatapia]

Setting the width on ContactName (which I dont want to do as I want it to take remaining space) yields slightly less misaligned results but still not great:

[gatapia]

Just to clarify further, this only happens with scrollable=true tables as the header is a separate element from the body.

[billdwhite]

+1 on this; same problem here

[sylvainpey]

I have the same problem with relative width (in %). I precise that it appears only if the scrollbar is not displayed (not enought lines). Actually, the scrollbar width is always "reserved" on the right of the header but not in the lines part.

[edangerfield]

Same problem as well

[tgomas]

Also affected by this problem.

[sgomanf]

same problem as well

[github-ek]

Same problem as well

[cagataycivici]

Is this related to premium themes or also happens on other themes as well?

[tgomas]

Here we encounter it with default theme.
However we don't use last version:
"primeng": "1.0.0-beta.8",
"primeui": "4.1.12"

[erlopezh]

@cagataycivici

I'm using delta theme,
"primeng": "1.0.0-beta.15",
"primeui": "4.1.15",

This is related with #859, when setting scrolling="true" this issue occurs.

[cbelhaffef]

Hi, same problem as well

I'm using delta theme,
"primeng": "1.0.0-beta.16",
"primeui": "4.1.15",

[cagataycivici]

1171 adds improvements to scrollable and I can't replicate this right now, please try with upcoming RC1 and drop a comment if you still experience it then we'll reopen.

[sgomanf]

when I put the resizableColumns="true", columns with explicit witdh, do not respect such wide.

<p-dataTable [value]="resumen" selectionMode="single" [(selection)]="liqselected" (onRowSelect)="onRowSelect()" [rows]="17" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,30]" [responsive]="true" resizableColumns="true"> <p-column field="codigo" header="CODIGO" [sortable]="true" [style]="{'width':'20%'}" > <template let-col let-prest="rowData" pTemplate type="body"> <span>{{prest[col.field]}}</span> </template> </p-column> <p-column field="nombre" header="NOMBRE" [sortable]="true" [filter]="true" filterMatchMode="contains" ></p-column> <p-column field="saldo" header="MONTO" [sortable]="true" [style]="{'width':'16%'}" > <template let-col let-prest="rowData" pTemplate type="body"> <span style="float:right">{{prest[col.field] | number:'1.2-2'}}</span> </template> </p-column> </p-dataTable>

[gatapia]

This is still an issue in RC6:

Cannot reopen issue, should I open a new one?

[simeyla]

Why is this closed? It is still a problem even with final release

[simeyla]

I think I was mistaken - seems to be fixed

[StevenLiekens]

I still have this issue when I use the Bootstrap theme. Column headers are too narrow when scrollable=true.

I find that this issue only occurs when there are not enough rows to fill up the scrollHeight. Since there is no overflow, no scrollbar is shown. The columns stretch to fill the available width. I think this is why the column headers are misaligned.

<p-dialog #dialog (onBeforeShow)="onBeforeShow($event)" (onBeforeHide)="onBeforeHide($event)" [header]="title" [(visible)]="visible"
  modal="modal">
  <div style="max-width: 600px;">
    <p-dataTable #dt [value]="values" selectionMode="single" [(selection)]="current" [globalFilter]="filter" scrollable="true"
      scrollHeight="300px">
      <p-header>
        <div class="ui-widget-header">
          <div class="has-feedback">
            <input #filter type="text" class="form-control" placeholder="Search">
            <span class="fa fa-search form-control-feedback"></span>
          </div>
        </div>
      </p-header>
      <p-column field="name" header="Name"></p-column>
      <p-column field="isnType" header="Type"></p-column>
      <p-column field="description" header="Description"></p-column>
    </p-dataTable>
  </div>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <button type="button" class="btn btn-primary" (click)="confirm($event)">OK</button>
      <button type="button" class="btn btn-default" (click)="dialog.hide($event);">Cancel</button>
    </div>
  </p-footer>
</p-dialog>

[Gwiny]

Yep. Still an issue on bootsrtrap theme.

[StevenLiekens]

Still an issue with the Omega theme as well (but not super noticeable) . And probably with all other themes, because I don't think it's _just_ a styling issue. See my previous comment.

[StevenLiekens]

cc @cagataycivici
One reliable fix is to apply the following style:

div.ui-datatable-scrollable-body {
  overflow-y: scroll;
}

This style causes the scrollbar of the scrollable part to always be visible. This prevents the table body from expanding and becoming misaligned with the table headers.

Before

After

[jibin-tj]

Thanks for the work-around @StevenLiekens

[uberroot4]

How did you get this working? I am using .ui-datatable table { table-layout: auto !important; } for auto-width, but mine isn't looking like it should (as you can see on the picture)

[cagataycivici]

This issue is a bit bloated with different cases, please create a new ticket if issue still persists with 4.0.2.

[uberroot4]

Is 4.0.2 already out? Have installed 4.0.1 right now.

[cagataycivici]

Not yet, will be by tuesday. If you can provide a plunkr right now, that would help so we can review before release. But this was discussed many times, technically table-layout auto is not supported bh scrollable tables so we cant do much about it.

[uberroot4]

I got the plunkr to work: https://plnkr.co/edit/BQEPSsjz8UJO4bVf8jgi?p=preview

[akashdeepg12]

i got solution by below css class

.ui-datatable table
{
table-layout: auto !important;
}

[jibin-tj]

Hi MrToasty97
Please make sure you have the change in the correct component. Or else put it in style.css global css

[uberroot4]

I can't check it right now, but as I know I've put it in the gobal styles.css file.

[giscafer]

i fix it use the global css

.ui-datatable-scrollable-header-box{
    margin-right: 17px!important;
}

div.ui-datatable-scrollable-body {
    overflow-y: scroll;
}

[lanbin45]

@giscafer This works fine with a maximum client window size; But did you try resize your window size? The mis-aligned issue still exists!

update: It occurs only when you set every column's width with an explicit width. try set seval columns width before they fixed this issue

[bhaidar]

@cagataycivici I am still getting this behavior with 4.1.1
I have a scrollable="true" with fixed column width. Any workaround?

[Rchoudhary-tcs]

@bhaidar i am not getting any issues with the "LTR" but with "RTL",i am having the same mentioned issue.

[loliparra80]

I have a similar issue with frozen property and scrollable.

The frozen columns have 100px of width, but the cell doesn't adjust, if remove the property scrollable, the cells have the same width than the header.

The html is:
<div class="content-section"> <p-dataTable [value]="dataInfo" [scrollable]="true" frozenWidth="400px" unfrozenWidth="600px" [responsive]="true" > <p-column field="name" header="Nombre" [style]="{'width':'200px'}" frozen="true"></p-column> <p-column field="edit" header="Valor" [style]="{'width':'200px'}" frozen="true"></p-column> <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [style]="{'width':'100px'}"> </p-column> </p-dataTable> </div>

[peterstayne]

We're experiencing this really annoying issue in our app. Are the devs even looking into this? This bug is coming up to a year and a half old.

[bartosz-brodzik]

I'm struggling with this issue as well... is there gonna be a fix for this?

[AlanParsonsPro]

It works for me:

.ui-datatable-scrollable-header-box{
margin-right: 15px!important;
}

.ui-datatable-scrollable-body {
overflow-y: scroll !important;
}

.ui-datatable-scrollable-header {
width: 100%;
}

[NoX1337]

For any future dev who stumbles upon this:
None of the above proposed solutions are solving the problem, at least not when you have multiple pages and multiple different usages of the dataTable element.

[pabl8garcia]

I experienced this issue too, it is not related with primefaces at all, it is happening when you use a template based on bootstrap i think most of the templates are based on bootstrap, you have to locate the code in bootstrap.css of your template and delete it, in my case i deleted all the css related with glyphicon and the beggining of the file, i dont know if this is the best solution but it worked for me.

[laurieatkinson]

These styles alone did not solve the problem when the table width became too small. Adding the following finally did the trick for me.

This fixes the column width mismatch problem:
.ui-datatable-scrollable-header table { table-layout: fixed; }

This fixes the problem with the cell contents overlapping the boundaries of the cells. If you do not like the scrollbar and would rather see the content chopped off, use hidden instead of auto.
.ui-datatable-scrollable table td, .ui-datatable-scrollable table th { overflow-x: auto; }