Toolbar button size styling on figures

Hi, I’m trying to figure out how to use a css directive to change the toolbar size for a figure object.
I was hoping to do this via the stylesheets kwarg.
Using

InlineStylesheet(css=":host {--button-width: 60px; --button-height: 60px;}")

does nothing. Any suggestions? I am a complete css novice.

Thank you!

I think the best way is to use the DOM inspector (in your favorite web-browser) to look at the figure’s toolbar’s buttons.
I use Chrome, and the way to do it is to right click on the element you want to check and go to “Inspect”.

You’ll then be able to drill down (while looking at the size parameter in your case) to figure out which div class contains the size you want to change.

Hi @Gen, alas, that was my starting point. One possibility for the relevant class is the bk-OnOffButton.
I tried this as well, and I can find it in the DOM, but it has no effect.

InlineStylesheet(css="bk-onOffButton {width: 60px; height: 60px;}")

There’s something I’m missing here!

@stephen_maxwell please provide a complete Minimal Reproducible Example that demonstrates the approach you expect to work that isn’t working for you so we have a concrete basis for discussion.

I guess it should be .bk-onOffButton, i.e. with a leading dot for the class.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.