How to control whitespace between objects within pn.WidgetBox?

I’m using pn.WidgetBox populated with two instances of param.String() to display messages to my app’s users. Some of the processes take a while so I did this to provide updates while the pn.WidgetBox.loading spinner is doing it’s thing in the WidgetBox immediately below. Overall it works very well and the combination of the .loading spinner and these messages is pretty good but I would like to improve the appearance of my messaging solution.

I am creating the WidgetBox like this:

status_widgetbox = pn.WidgetBox(
    pn.Column(
        param.String(),
        param.String()
    ),
    max_height = 72
)

image

When the app launches the two param.String() show those two borders/outlines but when I update them with text the outlines go away. I do not want those outlines to show at all but can’t figure out how remove them to create the appearance of an empty WidgetBox. Any ideas?

The other issue is the amount of vertical space between the two strings. There’s enough space there to insert a third line of text and I would like to remove that empty space. I’ve tried setting margin = 0 on both the pn.WidgetBox and the pn.Column but neither had any effect. I’ve also reduced the max_height of the pn.WidgetBox but that just chops off the bottom string like this:

image image

I’m using max_height because my app uses the ReactTemplate with pn.config.sizing_mode = "scale_both".

Overall I love Panel and these are pretty minor visual issues… they’re just driving me a bit nuts! :grin:

Here is run-able minimum code for the relevant parts of the app:

import panel as pn
import param
pn.extension() 
pn.config.sizing_mode = "scale_both"

class App(param.Parameterized):
    app = pn.template.ReactTemplate(title="My App")

    status_widgetbox = pn.WidgetBox(
        pn.Column(
            param.String(),
            param.String()
        ),
        max_height = 60
    )

    load_btn = param.Action(lambda x: x.param.trigger("load_btn"), label="Load input data to map")
    clear_btn = param.Action(lambda x: x.param.trigger("clear_btn"), label="Clear map")
    run_btn = param.Action(lambda x: x.param.trigger("run_btn"), label="Run")
    save_btn = param.Action(lambda x: x.param.trigger("save_btn"), label="Save")
    csv = param.Boolean(True, doc="Used to specify whether to save results as .csv", label=".csv")
    shp = param.Boolean(True, doc="Used to specify whether to save results as .shp", label=".shp")

    def create_button_widgetbox(self):
        """Method to assemble the buttons and checkboxes into a widgetbox.
        :return: a `panel.Widgetbox` containing buttons and checkboxes
        """
        return pn.WidgetBox(
            self.param["load_btn"],
            self.param["clear_btn"],
            self.param["run_btn"],
            self.param["save_btn"],
            pn.Row(self.param["csv"], self.param["shp"]),
            max_height=200,
        )

    def view(self):
        self.app.sidebar.append(self.status_widgetbox)
        self.app.sidebar.append(self.create_button_widgetbox)
        return self.app.show()

a = App()
a.view()

That should look like this: