Quasar: QFab button needs less padding when used on a toolbar beside other QBtn's with/without dense.

[tohagan]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I've just added an FAB (with a list of vertical drop down FAB action buttons) to replace a single button on a toolbar. Looks very cool but there appears to be no way to adjust the padding of the FAB button (16 px) to match the dense padding of other buttons on the toolbar. Even if the other buttons are non-dense the padding is still larger.

Describe the solution you'd like
A clear and concise description of what you want to happen.

I think QFab needs a dense property (that's all I need today!)
Perhaps you'd also want some other option to match the padding for non-dense toolbars.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Tried setting style values on the FAB but that only affects the outer div whereas this padding is set on an inner wrapper div and perhaps the nested QBtn inside QFab.

[tohagan]

Ahh the QFab button is also increasing the height of the toolbar due to a min-height rule applied to fab buttons. I actually need to show/hide the QFab button and this makes the toolbar wobble as it's height is adjusted.

&--fab {
    .q-icon {
      margin: auto; }
    .q-btn__wrapper {
      padding: 16px;
      min-height: 56px;  <<< 
      min-width: 56px; } }

[pdanpdan]

Please add a codepen.

[tohagan]

I've created a codepen but for some reason the QFabAction buttons are not displaying vertically. I don't have this issue in my app. Anyway it does show the padding issue.

https://codepen.io/tohagan/pen/RwPMKVr

The FAB button is 56x56 whereas other standard QBtn on the toolbar are 42x42 so this increases the toolbar height.

If QFab is dense then I think the setting fab: true passed to the nested QBtn would need to be replaced with dense: true .

https://github.com/quasarframework/quasar/blob/2e65e4c5341d67b596b0a766b5129bc8272ee7ad/ui/src/components/fab/QFab.js#L111

https://github.com/quasarframework/quasar/blob/428909102bc056790f7b8c60f5c81868ee6bcd0f/ui/src/components/btn/QBtn.styl#L107-L134

[pdanpdan]

Just for ref the codepen with fixed end of tags: https://codepen.io/pdanpdan/pen/XWbEpGL?editors=1000

We'll think about the problem, but the Fab is only thought to be large, and not in a toolbar but standalone.

[tohagan]

Yes I understand that's the traditional use of FAB. But I'd suggest that this new application for FAB's is very good. My need is for internationalisation (avoiding menu labels) and having a very compact UI.

[smolinari]

@tohagan - With a little bit of tweaking. 😃

https://codepen.io/smolinari/pen/eYNMvQJ?editors=1100

Not sure that is the intention you wanted, as the square version is now small too. But, I think you can see it is doable with simple CSS.

Scott

[tohagan]

@smolinari Thanks Scott ... will give that a try.
I wondered if there might be a way to adapt the wrapper.

[tohagan]

My app now works fine ... but I've left this issue open in case you'd wish to add the dense option to QFab. Thanks guys ... Awesome community!

[rstoenescu]

New prop (padding) will be available in "quasar" v1.11.0.

[tohagan]

Thanks @rstoenescu !