CODEWITHSUNDEEP
csspyvizpanel-pyviz
Marcel Flygare
Marcel Flygare

Reputation: 887

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

I would like to arrange pyviz panel widgets with the help of a gridspec. Expected result is a screen without any borders. In the example the green areas match nicely, however there is a (white) border around the blue widget ? How can I remove it ? I have tried to use css as shown in the code, but without sucesss.

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

Upvotes: 1

Views: 597

Answers (2)

Marc Skov Madsen
Marc Skov Madsen

Reputation: 76

An alternative that works is

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

Upvotes: 2

xavart
xavart

Reputation: 132

The ".widget-box" class is already defined and with "!important" property on border: https://github.com/holoviz/panel/blob/master/panel/_styles/widgets.css

In you case you should just use a different css class for example "my-widget-box" and it should work or use the "!important" css property enter image description here

Upvotes: 2

Related Questions