Button height different between gradient and color styles

[mrckzgl]

Hey, I just figured that the buttons of type color have a different height, than those of type gradient. This hinderes me to use them side by side. This is also visible in the documenation (https://flowbite-vue.com/components/button). Color style:

has height 38px. But gradient style:

has height 36px.

cheers

[mrckzgl]

...also if a button is inside a FwbTooltip element's #trigger template, it might have a different height than if it is placed outside...

[ogzcode]

Hey, I just figured that the buttons of type color have a different height, than those of type gradient. This hinderes me to use them side by side. This is also visible in the documenation (https://flowbite-vue.com/components/button). Color style:

has height 38px. But gradient style:

has height 36px.

cheers

Hello, @mrckzgl
For your first question, I tried it on stackblitz and there is no size problem, the buttons are the same size. The reason why it looks like this on the doc page may be that the style of the doc page affects the button style. Please share the code on stackblitz for more clarity.

[ogzcode]

...also if a button is inside a FwbTooltip element's #trigger template, it might have a different height than if it is placed outside...

@mrckzgl
Please share a code example for more clarity.

[mrckzgl]

@ogzcode sure, have a look here: https://stackblitz.com/edit/vitejs-vite-rpth2s?file=src%2FApp.vue&terminal=dev
In the first and second row the left button is 36px height, the right is 38px height. So as long as there is at least one button contained in a tooltip the heights differ, but only if a color and gradient button are beside each other.

The point, I showed the documentation page is that whatever css / html is around those buttons, they should all have the same height. So I assume the same problem, which is causing the buttons to have different size if they are surrounded by a FwbTooltip is also happening in the doc page.

EDIT: Also as it is happening on the doc page, I thought it was independent from the tooltip, and I also thought I was able to reproduce it in our code without the tooltip, but I don't know how anymore.

[ogzcode]

@mrckzgl
Hello, the source of the problem is color=alternative and color=light, a border has been added to make the buttons stand out. If you change the type of your buttons, you can see that they are the same size.

In the stackblitz example you gave, I changed the color of the normal buttons to green and dark and their sizes were the same, you can try it too.

If you are going to use the light and alternative buttons, you can give the other buttons a border style as follows, so they will be the same size.

<FwbButton gradient="purple" class="border">test</FwbButton>

I hope I was able to answer your question : ).

[mrckzgl]

Thanks alot, yes that some buttons have a border and some don't is the source of the issue here.
The workaround to set a border on the gradient button is sadly no solution, as the border color would not follow the gradient, it is just of single color. Or is it possible to set the border-color to match / expand exactly the gradient?

I hope I was able to answer your question : ).

I'm afraid the OP wasn't a question, rather a bug report / issue report ;-) for the following reasons:

1. Consuming the library it is unexpected that buttons of the same size have different height. In this case, color=alternative and color=light have height 38px, all others 36px. If they are in a flex container row, such as in the documentation page, as soon as there is one 38px height button in that row, all others turn 38px due to flex scaling. If they are not in a flex container, they will have different sizes. Both of these behaviors is sub-optimal. I currently don't have a suggestion how to fix this without explicitly specifying the height of the buttons (using some calc statement to make it kind of responsive), as css sadly has the oddity of not allowing borders to expand to the inside rather to the outside of an element, but there may be solutions. In any case it would be nice if this gets documented, as it is unexpected, at least for me.

2. There is an oddity in the implementation of the FwbTooltip, as when present it results in a possibly different height than if not: If the FwbTooltip is not added in the first row of the stackblitz example, both buttons are 38px height (just like in the docs page). Looking at its implementation I can see why:
   
   Both divs, outer <div class="flex items-start" and inner <div class="v-popper v-popper--theme-tooltip-dark" are added by the tooltip component. Outer div has height 38px, but inner div has height 36px causing the inconsistency. This would be fixed if the inner div would also be flex: <div class="flex v-popper v-popper--theme-tooltip-dark". And a second thought on this: Why not remove the outer div completely and only set the inner div to be a flex container?

best

[tho-dan]

I noticed that this issue is actually inherited from Flowbite itself (compare Flowbite Buttons documentation), however I agree that it is not as nice to work with if I as a developer have to consider this quirky behavior.

One alternative might be to add a :before pseudo element to the button that applies the border where required, pushing the border into the element and therefore preserving the size of the parent. I'm not sure whether this could be achieved using only Tailwind classes (I suppose some custom CSS would be required) though, so that might be something that needs to be discussed further