Как расположить виджеты панели pyviz в сетке c без границ? - PullRequest
1 голос
/ 08 января 2020

Я бы хотел упорядочить виджеты панели pyviz с помощью гридспе c. Ожидаемый результат - экран без границ. В этом примере зеленые области хорошо совпадают, однако вокруг синего виджета есть (белая) граница? Как я могу удалить это? Я пытался использовать 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

enter image description here

Ответы [ 2 ]

2 голосов
/ 09 января 2020

Альтернатива, которая работает:

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()

Смотрите скриншот здесь

2 голосов
/ 09 января 2020

Класс ".widget-box" уже определен и имеет свойство "! Important" на границе: https://github.com/holoviz/panel/blob/master/panel/_styles/widgets.css

В вашем случае вам следует просто использовать другой css класс, например, "my-widget-box", и он должен работать или использовать "! Important" css свойство enter image description here

...