Difference between button border and background sizes in column panels

Anvil Q&A
1

I’d like to put buttons with a border into a column panel, and have the disabled button background take up the entire size. In flow panels, the buttons work the way I’d expect, with the background and border sizes matching. But in a column panel the border size takes up the entire width, while the disabled background size is smaller.

Here’s a clone that demonstrates the behavior by disabling the buttons to get the gray background: Anvil | Login

I’m assuming there’s CSS that could be used to change this behavior, but I’ve had no luck finding it.

2

Well… isn’t the solution the one you mentioned?
Use a flow panel!

I often use flow panels for reasons similar to this one, sometimes nested flow panels. Easier than messing with css.

3

The clone example shows the problem, not the context. In context (dynamically creating a bunch of buttons that must interact and be interacted with by other components), it’s far simpler for me to use a button directly inside a column panel, assuming the CSS issue can be sorted.

If it can’t, then of course a flow panel is the fallback plan. But that’ll require code changes and more levels of indirection in the code than are already there.

Hence the question about the CSS fix.

Edit: Also played a bit more with flow panel vs column panel, and I need the border width from column panels (flow panels size the buttons based on the text length, column panels size them based on the column panel width).

4

Turns out there’s a Bootstrap class that does exactly what I wanted, btn-block. The problem then became how to add that class to the dynamically created buttons. Getting the DOM node associated with the button gets the DOM node for the div containing the button tag, not the button tag itself, so I ended up with this sort of code:

    b2 = js.get_dom_node(self.button_2)
    b2 = b2.getElementsByTagName("button")
    b2[0].classList.add ("btn-block")

It seems a bit hacky, but it works and the button background fills up the entire column panel width.

1 Like
5

I may be missing something - but does setting the button align property to full do the same thing?

6

You’re definitely not missing anything! That does the trick, too, and is far less hacky. I guess I always think about align in terms of the text of the button, and not about the background.

Thanks!