0

when using a scrollable PrimeVue DataTable with fixed column widths (using px), in conjunction with Bootstrap grid, I am getting this behaviour:

table example

This issue only seems to occur if the table has more than roughly 5 rows, and will happen reactively (i.e. if the table has 3 rows on page load and more rows are added, the header will break as shown above).

Here is my HTML (irrelevant parts are omitted hence the odd structure):

<html lang="en">
    <head></head>
    <body>
        <div>
            <div class="container-fluid">
                <div>
                    <div>
                        <div class="row no-gutters">
                            <div class="col-xs-12 col-sm-12 col-md-4">
                                <div class="row no-gutters p-2">
                                    <div class="custom-card">
                                        <div class="row no-gutters">
                                            <div class="col">
                                                <data-table></data-table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

I am also using the following CSS classes (including overwritten PrimeVue CSS):

.custom-card {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  padding: 8px;
  width: 100%;
}

.p-filter-column,
.p-datatable-row td,
.p-datatable-emptymessage p {
  word-break: break-all !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
}

.p-datatable-emptymessage p{
  margin-bottom: 0;
}

.p-datatable-emptymessage td{
  padding: 0 !important;
}

.p-datatable-header,
.p-paginator-bottom,
thead.p-datatable-thead tr th {
  word-break: break-all !important;
  padding: 0.3rem !important;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  background: #6dbfd5 !important;
  border-color: #6dbfd5 !important;
  color: #ffffff;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight:hover {
  background: #31859c !important;
  border-color: #31859c !important;
  color: #ffffff;
}

.p-paginator,
.p-paginator .p-paginator-last,
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight),
.p-datatable .p-sortable-column.p-highlight,
.p-sortable-column-icon {
  color: #212529 !important;
}

.p-paginator .p-paginator-pages .p-paginator-page,
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-last,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-prev {
  min-width: 1.8rem !important;
  height: 1.8rem !important;
}
user14131782
  • 736
  • 1
  • 11
  • 20

1 Answers1

2

I have no precise answer, but a precious (I hope) advice : ==> As much as possible, do not use PrimeVue AND bootstrap. I got strange style "conflicts", weird behaviors when mixing them. So try to replace the bootstap stuffs by PrimeVue equivalents. This will simplify your problem first.

Dharman
  • 30,962
  • 25
  • 85
  • 135
LaurentReese
  • 41
  • 1