tabulator default font size is too large

[samimia-swks]

Using panel 1.4.4 with bootstrap template, I have noticed that normal text (e.g. markdown panel) renders in 12px size but the tabulator widget uses 16px, which looks pretty odd:

There is no option I can see to adjust the font size of the tabulator widget. I feel like either the default should be adjusted or a mechanism to easily change font should be provided.

As a workaround, I am using this custom css stylesheet:

tabulator_css = ".tabulator-cell {font-size: 12px;} .tabulator-col-title {font-size: 12px;}"

[maximlt]

@samimia-swks thanks for reporting this issue. The Tabulator JavaScript library Panel depends on to implement the widget has different font size values based on the theme used. For instance, it differs between Bootstrap 3 (14 px) and Bootstrap 4/5 (16px).

• https://github.com/olifolkerd/tabulator/blob/5c5512cf57758d5d9eb8f2ecadfea1183659390d/dist/css/tabulator_bootstrap3.css#L5
• https://github.com/olifolkerd/tabulator/blob/5c5512cf57758d5d9eb8f2ecadfea1183659390d/dist/css/tabulator_bootstrap4.css#L5
• https://github.com/olifolkerd/tabulator/blob/5c5512cf57758d5d9eb8f2ecadfea1183659390d/dist/css/tabulator_bootstrap5.css#L5

It may be that Panel should set better font sizes in general. In that case, when a user sets a specific theme it also makes sense to respect the theme. We should at least document how to set the font size of a Tabulator widget with CSS like you did.

[maximlt]

@thuydotm updated the docs, keeping it open for the UX discussion.