Cannot change the container tag of QBtn

[Shayan-To]

What happened?

I'm absolutely positioning a q-btn with both left and right set. It happens that for some reason, button tag does not work when both left and right are set (tested on both Firefox and Edge), and it will just sit on the left (and won't stretch). Changing just the tag to div will fix the problem.

I read the source for q-btn and there is no way to change the tag, other than setting one of the link props, which change it to a.

What did you expect to happen?

I want some way to change the tag of a q-btn to div. No way exists currently.

Reproduction URL

https://jsfiddle.net/zhmwj3o0/

How to reproduce?

1. Go to the link.
2. See that the size of the buttons are different, even though they have the exact same styling.
3. Also see that tag=div does not work.

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Microsoft Edge

Quasar info output

Operating System - Windows_NT(10.0.19043) - win32/x64
NodeJs - 16.13.1

Global packages
  NPM - 6.14.15
  yarn - 3.1.1
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.4.13 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.1 -- Quasar Framework local CLI
  @quasar/extras - 1.12.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.29 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  vuex - 4.0.2 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.16.12 -- Babel compiler core.
  webpack - 5.67.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - DESKTOP-BBOGDUD
  vEthernet (Default Switch) - 192.168.176.1
  vEthernet (WSL) - 192.168.128.1
  Wi-Fi 2 - 192.168.1.5
  vEthernet (Ethernet) - 172.28.16.1
  vEthernet (Wi-Fi 2) - 172.24.208.1

Relevant log output

No response

Additional context

No response

[gregadro]

Have you tried to apply full-width CSS class to the button? It works on your CodePen.

[Shayan-To]

@gregadro Not if you have non-zero left and right. Updated the reproduction URL.

[pdanpdan]

https://stackoverflow.com/a/7271936

[Shayan-To]

@pdanpdan Well, adding min-width: -moz-available fixes the problem on Firefox, but the problem still remains on Microsoft Edge (and probably Chrome, as they are both Chromium).

Here's link to the version with min-width: -moz-available: https://jsfiddle.net/jfmb8yn3/

[pdanpdan]

What version of chrome/edge, on what os?

[Shayan-To]

Microsoft Edge Version 94.0.992.50 (Official build) (64-bit) Windows 10 Pro 21H1 Build 19043.1387

[gregadro]

The latest Chrome(98.0.4758.102) and Edge(98.0.1108.56 ) on the Linux Zorin distro works even without min-width property.

[Shayan-To]

Here's an screenshot of my Edge: (I just opened the link from my previous comment.)

Does Quasar only support latest Chrome and Edge only on Linux Zorin distro?