CODEWITHSUNDEEP
tabulator
Philipp Grigoryev
Philipp Grigoryev

Reputation: 2118

How to get rid off last column right double border?

Is there a way to make the right border of the last column to be at the position of the outer border? In other words, how to get rid off that nasty fakey column to the right of the last column?

enter image description here

Here is the Tabulator object:

new Tabulator("#campaignsInfo", {
    layout: "fitColumns",
    reactiveData: true,
    data: campaignsInfo,
    columns: [
        { title: "id", field: "id", visible: false},
        { title: "Completed", field: "completed", width: "90"
            , align: "center", formatter: "tickCross", headerSort: false},
        { title: "Started", field: "surveyStarted", width: "70"
            , align: "center", formatter: "tickCross", headerSort: false},
        { title: "Invite Sent", field: "emailSent", width: "90"
            , align: "center", formatter: "tickCross", headerSort: false},
        { title: "Client ID", field: "policyID", width: "15%", headerSort: false},
        { title: "Completion Date", field: "surveyResponseCompletedTimestamp", width: "30%"
            , formatter: "textarea", headerSort: false},
        { title: "Status", field: "locked", align: "center", headerSort: false
            , formatter: printLock, cellClick: unlock
            , tooltip: lockTooltip
        },
    ],
});

Here is an updated image of the last column, after a suggestion of Jose P. has been applied. As you can see the cell right border is still is in place, which is not quite what we want. I believe it's something to do with the tabulator, as when I increase the width of the browser window the border getting wider, as the column width is recalculated and re-applied. Also I see an error in the console ResizeObserver loop completed with undelivered notifications.

enter image description here

Thank you in advance!

Upvotes: 1

Views: 449

Answers (1)

Jose P.
Jose P.

Reputation: 886

Add the following to .css file:

.tabulator-row .tabulator-cell[tabulator-field="locked"]{
  border-right: 0px;
}
.tabulator .tabulator-header .tabulator-col[tabulator-field="locked"]{
  border-right: 0px;
}

Upvotes: 1

Related Questions