Tuesday, 1 June 2021

custom text position on ipywidgets button

I am trying to put a "+" sign on a button that reaches all the edges. This is a minimal example, from a Jupyter notebook, first a style:

%%html
<style>
.button_style{
    font-size:155px;
    color: black;
}
</style>

and the button itself:

import ipywidgets as ipyw
button = ipyw.Button(description='+', style={'button_color':'blue'},    
                     layout=ipyw.Layout(width='80px', height='80px'))
button.add_class("button_style")

As you can see, what I tried was making the font size big enough to reach the button edges. But the problem is that the text is not aligned with the middle of the button:

enter image description here

I've played with options like text-align, left-padding, left-margin etc, but they all affect the entire button, i.e. they translate or deform the entire blue square, rather than just the text within it.

Is there any way to do this? Ideally I'd be able to change the center of the cross but always have it reach all edges, and without making the cross itself super fat. But less than ideal solutions are also welcome.

Update:

So the result I am looking for is this:

enter image description here

where the center and ideally also the thickness of the lines can be configured. It doesn't matter if the result is achieved with a '+', as long as the button looks like this and the background color can still be changed with style={'button_color': ..}.



from custom text position on ipywidgets button

No comments:

Post a Comment