panel icon indicating copy to clipboard operation
panel copied to clipboard

tabulator default font size is too large

Open samimia-swks opened this issue 1 year ago • 1 comments

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:

image

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;}"

samimia-swks avatar Aug 07 '24 20:08 samimia-swks

@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 avatar Sep 23 '24 09:09 maximlt

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

maximlt avatar Oct 23 '24 09:10 maximlt