panel icon indicating copy to clipboard operation
panel copied to clipboard

Progress Bar Styling Not Rendering due to CORS

Open contang0 opened this issue 1 month ago • 0 comments

I am having the same issue described here. Basically in some environments we cannot access external resources necessary to style some components, such as the Progress bar. Without styling it appears so narrow that I can barely see it, and nothing worked until I manually fed the 4 CSS files as strings to the stylesheets argument.

loading = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/css/loading.css" as string
progress = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/css/progress.css" as string
default = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/bundled/theme/default.css" as string
native = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/bundled/theme/native.css" as string

progress= pn.indicators.Progress(
          name="Progress",
          width=500,
          active=False,
          stylesheets=[loading, progress, default, native],
      )

ALL software version info

(this library, plus any other relevant software, e.g. bokeh, python, notebook, OS, browser, etc)

panel v1.4.4 python v3.12 chrome windows 11

Description of expected behavior and the observed behavior

Please see the screenshots

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
from bokeh import resources
from bokeh.io import output_notebook

r = resources.Resources(mode='inline')

output_notebook(r)
pn.extension()

pn.indicators.Progress(name='Progress', value=20, width=200)

Screenshots or screencasts of the bug in action

With CSS styling added manually:

image

Without styling:

image

contang0 avatar Jun 14 '24 20:06 contang0