How to set max-width on the Canvas?

[dsblank]

Sorry if this is an ipywidgets question, but I can't figure out how to set max-width on the canvas.

If I go into the browser debugger and manually set <canvas ... style="max-width: 100%"> then I get the behavior that I wish:

I am constructing the canvas this way:

canvas = Canvas(width=self.width, height=self.height, sync_image_data=True)

I've tried using max_width="100%" and Layout() in various places, but can't figure it out.

Any ideas?

[martinRenou]

Did you try the following?

canvas = Canvas(width=self.width, height=self.height, sync_image_data=True)
canvas.layout.max_width = '100%'

[dsblank]

I did.

But I think there is a bug. After it is visible, then that will work!

[dsblank]

Actually, just after it has been added to the panel, then it will work.

[martinRenou]

I am not sure max_width is the right parameter to tweak for what you want to achieve, I would have expected the following to be enough:

canvas = Canvas(width=self.width, height=self.height, sync_image_data=True)
canvas.layout.width = '100%'

[dsblank]

Here is what does work, using your method:

            app = JupyterFrontEnd()
            panel = Panel()
            panel.children = [canvas]
            app.shell.add(panel, "main", {"mode": "split-right"})
            canvas.layout.width = "100%"
            canvas.layout.height = "auto"

But is has to happen after the add(). I think.

[martinRenou]

If I understand correctly, in your use case the Canvas is wrapped by another element inside of the panel, is that it? So IIUC the Canvas will take 100% of its container size, but the container itself should also take 100% of the available panel width, am I right?

[dsblank]

No, it is just the canvas (in the panel). See above.

[martinRenou]

I am not familiar with ipylab, I'm wondering if the panel does add extra CSS to the Canvas that overwrites your width/height settings then

[dsblank]

This does not work:

            canvas = Canvas(
                width=self.width, height=self.height, sync_image_data=True
            )
            canvas.layout.width = "100%"
            canvas.layout.height = "auto"

But doing exactly the same after the add-to-panel does work.

[dsblank]

When I went back and just set canvas.style.width to "100%" and canvas.style.height to "auto" everything worked as expected. Sorry for the noise!

[martinRenou]

Ahah no worries!