如何在没有任何边框的网格规范中排列pyviz面板小部件？

Question

我想安排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“类，并且边框上具有"!important”属性：https://github.com/holoviz/panel/blob/master/panel/_styles/widgets.css

在这种情况下，您只需使用不同的css类，例如"my-widget-box“，它应该可以工作，或者使用"!important”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