如何在没有任何边框的 gridspec 中排列 pyviz 面板小部件？

Question

我想在 gridspec 的帮助下安排 pyviz 面板小部件。预期结果是一个没有任何边框的屏幕。在示例中，绿色区域匹配得很好，但是蓝色小部件周围有一个（白色）边框？我怎样才能删除它？我已尝试使用代码中所示的 css，但没有成功。

import panel as pn
css = '''
.widget-box {
  background: blue;
  border-radius: 0px;
  border: 0px none solid;
}
'''
pn.extension(raw_css=[css])
gspec = pn.GridSpec(width=200, height=200)
gspec[0,   0:2] = pn.pane.Markdown("Grid1", background='green' , margin=0)
gspec[1,   0:1] = pn.pane.Markdown("Grid2", background='green' , margin=0)
gspec[1,   1] = pn.widgets.FloatSlider(name='Widget', margin=0, css_classes=['widget-box'])
gspec

Answer 1

“.widget-box”class 已经定义并且边框上带有“!important”属性： https://github.com/holoviz/panel/blob/master/panel/_styles/widgets.css

在你的情况下，你应该只使用不同的 css class 例如 "my-widget-box" 它应该可以工作或使用“！重要” css 属性

Answer 2

另一种可行的方法是

import panel as pn
css = '''
.widget-box {
  background: blue;
  border-radius: 0px !important;
  border-width: 0px !important;
}
'''
pn.extension(raw_css=[css])
gspec = pn.GridSpec(width=200, height=200)
gspec[0,   0:2] = pn.pane.Markdown("Grid1", background='green' , margin=0)
gspec[1,   0:1] = pn.pane.Markdown("Grid2", background='green' , margin=0)
gspec[1,   1] = pn.widgets.FloatSlider(name='Widget', margin=0, css_classes=['widget-box'])
gspec.servable()

See the screenshot here

如何在没有任何边框的 gridspec 中排列 pyviz 面板小部件？

How arrange pyviz panel widgets in a gridspec without any borders?

css

pyviz

panel-pyviz