Hello community,
Can any html/css experts please guide me as to how to fill the contents of a card responsively. Also the card content should fill all empty horizontal space even when the sidebar is collapsed. Using fixed spacers or HSpacer doesn’t help unfortunately.
MRE below
import panel as pn
import param
class Inputs(param.Parameterized):
input1 = param.ObjectSelector(objects=[1, 2, 3, 4])
input2 = param.ObjectSelector(objects=[1, 2, 3, 4])
def main_pane():
a = pn.pane.Markdown('<span style="font-family:Trebuchet MS;font-size:16px;color:gray">ABC (10 Sep 2022)</span>')
b = pn.pane.Markdown('<span style="font-family:Trebuchet MS;font-size:16px;color:gray">A</span>'
'<span style="color:red;font-size:13px">100.00</span>')
c = pn.pane.Markdown('<span style="font-family:Trebuchet MS;font-size:16px;color:gray">B</span>'
'<span style="color:red">120.00</span>')
d = pn.pane.Markdown('<span style="font-family:Trebuchet MS;font-size:16px;color:gray">C</span>'
'<span style="color:red">130.00</span>')
return pn.Row(pn.Column(a), pn.layout.HSpacer(), pn.Column(b), pn.Column(c), pn.Column(d), margin=(-25, 0, 0, 0),
sizing_mode='stretch_width')
if __name__.startswith('bokeh'):
t = pn.template.FastGridTemplate(
site='Panel', title='Test',
sidebar=Inputs(),
theme='dark',
row_height=30,
cols={'lg': 24, 'md': 20, 'sm': 12, 'xs': 8, 'xxs': 2},
prevent_collision=True
)
t.main[:1, 0:11] = pn.panel(main_pane, lazy=True)
t.servable()
Empty Space even with sizing_mode set to stretch_width
More empty space when the sidebar is collapsed:
Many Thanks
JJ