Have a dbc.Button with just an Icon. Still some y-Padding left

Dash Python
1

Hi,
I’m using bootstrap for my Layout and it has been a hustle to say the least. Still, everything is coming up nicely (as nicely as I can expect it to look at least ^^).
one Problem though.
I want to have a button which is basically just an Icon. No Padding around the button. I am using the bootstrap Icons and I have come up with this button:

            dbc.Button(
                className="bi-x-square-fill position-absolute top-0 end-0 p-0 border-0",
                id=f'label-delete-btn-{index}',
                style={'color': 'red', 'background': 'white'},
            )

The positioning is so that it sits on the top right corner of a card, the index is coming from the function which creates a bunch of these cards.
The resulting Button looks like this, however:
p-0_button

So it has no padding at the sides (px) but still some padding at the top and the bottom. This is with the border for better visualization of the padding, so omitting border-0 from the class string, but if the padding’s correct, I’ll ditch the border altogether.

How can I get rid of this remaining padding around the button?

Kind Regards,

ZBN

2

Hi @ZBN_FREEGHOST

One easy solution is to use a different icon. For example:


dbc.Button(className="bi bi-x  py-0 px-1", color="danger")

image

3

Hi @AnnMarieW,
Thanks for the Workaround, you’re right it pretty much is the button I’d image, although at this point, I could also just put an x as text inside a button :smiley:.
It also does not solve the problem for any other icon:
p-0_clock

I’d also be interested in the why. Why does setting the padding to zero on all four sides sets the padding to zero at the horizontals but not the verticals. In your example, you also set the padding vertical padding to zero but there’s still padding left.

So what’s the reason for it?

4

@ZBN_FREEGHOST

Those are great questions - and I haven’t figured that out yet. Personally, I don’t mind a little margin around the icon in the button. But if you want the icon to be the entire content, I’m sure there is a way to do that with some Bootstrap utility classes, but I stopped when I got something working :slight_smile:

Another workaround is just to use an html.I It has an n_clicks prop you can use in a callback, however it won’t have the formatting of the dbc.Button when you click on it.

My Dash Bootstrap Cheatsheet might help. When you find the solution could you post it back here? I’d like to know the answer too and I’ll add it to the examples section of the cheatsheet I’m working on .

1 Like
5

I’ll make a mental note to post back here if I find a solution :sweat_smile:.
Right now, as there are workarounds (and I’m a sole dev on this project) I will focus on different things in the app, plus learning some more bootstrap. Thanks for the cheatsheet, I will keep it around!
I’m curious for an answer though, so maybe during studying more bootstrap layouting, I will find something.

2 Likes
6

OK, I’m looking forward to your answer :slight_smile:

And it can work with other icons too - just need to pick the ones without the borders. Here’s an alarm:

dbc.Button(className="bi bi-alarm  py-0 px-1", color="danger")

image

or:

dbc.Button(className="bi bi-alarm  py-0 px-1", color="danger", outline=True)

image

7

Hi @AnnMarieW,

First of all, these buttons look way better than what I had in mind. So at the very least I’m convinced that my original problem doesn’t need fixing per se. Also, my idea of removing as much button as possible around a square image was pretty flawed from the get-go now that I see the alarm button you made :sweat_smile: Thanks for that!

However, I want to stress that your examples, as useful as they are for, well, actually good looking buttons (:D) are not what I had in mind, since they in fact have a padding around the icon and the border of the button.
My initial question was how to get rid of all padding around an icon and the border of a button. To me it’s odd, that it’s no problem with the horizontal padding but the vertical. Anyway, it’s a non problem, since, again, my idea of removing as much button as possible only to use an icon with a background was pretty questionable. Therefore this seems to be more of an academic problem. So again, if anyone can explain why horizontal padding can be removed but not vertical padding, feel free to enlighten me.

Thanks for the discussion and have great holidays (if applicable)!