Quasar: .q-btn and align-self: center

[smakinson]

Describe the bug
This is more of a question to determine if it is a bug or intentional.

align-self: center was added to .q-btn
https://github.com/quasarframework/quasar/commit/267df1f267d3d50fe0d33596866ba99d3a25be4a#diff-b58a63fbc9363b1ce7f8fb9507eda25aR20
https://github.com/quasarframework/quasar/commit/267df1f267d3d50fe0d33596866ba99d3a25be4a#diff-80c6894f16b607a4a61fd5608f1a7426R20

I noticed when I upgraded an existing project where I had div.column.items-center.items-sm.end I needed to add a class to the QBtn's instead to get the same result. Would this be considered a bug or intentional?

[rstoenescu]

Hi,

The align-self: center is intentional.

[LeoniePhiline]

Hi @pdanpdan and @rstoenescu

This change also misplaces buttons nested in a <div class="column items-start">.

Despite the .items-start, the button will be centered until you explicitly add .self-start to the q-btn component.

When you say "The align-self: center is intentional." did you have this in mind or is it an unintended side-effect?
It is not documented that buttons do not adhere to the flex grid class rules and it does not seem to make sense.
There's code to fix alignment in vertical cards, but not in column flex layouts.

If @smakinson and myself are really just not understanding your intention then please be so kind to help us understand. Thank you!

[pdanpdan]

In order to make the button size work it must have an align-self style.
In order to allow it to be changed by the user using flex classes the align-self style must not be very specific.
For QBtn in .row the most used alignment is center, and it can be only one, so the same is used for .column.

The solution is very simple: when inside a .column wrap the button(s) in a div, or add .self-... class on the button.

[LeoniePhiline]

I see.

This should probably be documented both at QBtn and at the Flex Grid pages.

[LeoniePhiline]

PS:
Why not choose auto or even better unset? It is not entirely clear to me why a specific align-self is required here.

A rule like for vertical card actions (https://github.com/quasarframework/quasar/commit/267df1f267d3d50fe0d33596866ba99d3a25be4a#diff-3516921655d24ae3d9090c263dfe50aeR53) for .column > .q-btn-item should also do the trick.
I just there is really no need to break how the flex grid works for everybody.

[pdanpdan]

Please add the .column > .q-btn-item rule in the CSS and it all should be good.
The default behavior for .column > div is to be stretched - if you think this is acceptable for your QBtn just put in your CSS

.q-btn
  align-self: unset

[LeoniePhiline]

I'd say this is a Quasar Framework bug - not at all something that should be fixed on individual project level.

It's an unmarked breaking change, too.

Such an "it's your own problem, just add some workaround" attitude is not going to make Quasar a better or more beloved or more widely used framework.

[pdanpdan]

@LeoniePhiline The great thing with open source is that you can send a PR to fix the problems you find. Please PR a fix.

[rstoenescu]

@LeoniePhiline Thanks for discussing on this. I hope this is not your only interaction with our team because it would sadden me to leave you with a sour taste. Please understand that we are dealing with 30-40 threads/tickets a day minimum (adding/changing 99% of what people request) while also offering free support on Discord. At times, such as above where this particularity of QBtn has been discussed a million times already, can lead us to great frustration. Having QBtn displayed exactly the same as <button> or <a> in all browsers (including IE11) and all scenarios is way harder than you'd imagine, which is why something may seem not right initially when instead is very logical if you know the whole picture. We promise that we'll revisit this part of QBtn in v1.8 (which is scheduled to be released at end of this week). Until then, please use the CSS override from a few comments above. Thanks and let's work together without escalating frustrations.

[rstoenescu]

Ok, I can confirm that the align-self CSS part will be removed in v1.8.0 (to be released at end of this week). Worth mentioning that the browser default behavior is to "stretch" the buttons.

[smakinson]

@rstoenescu Thanks for your awesomeness!

[LeoniePhiline]

@rstoenescu Thank you! You are amazing at de-escalation. :)