@s-molinari
sorry for the trouble and thank you!!
C
Best posts made by cmpscabral
-
RE: q-btn fails to render icon on-[left|right] css classes
Latest posts made by cmpscabral
-
RE: q-btn fails to render icon on-[left|right] css classes
@s-molinari
sorry for the trouble and thank you!!
-
RE: q-btn fails to render icon on-[left|right] css classes
@s-molinari Thank you for replying. I included the relevant parts, hope this helps
quasar create test
> Project name (internal usage for dev) test > Project product name (must start with letter if building mobile apps) Quasar App > Project description A Quasar Framework app > Author > Pick your favorite CSS preprocessor: (can be changed later) SCSS > Pick a Quasar components & directives import strategy: (can be changed later) Auto import > Check the features needed for your project: ESLint, Vuex, Axios, Vue-i18n > Pick an ESLint preset: Standard > Cordova/Capacitor id (disregard if not building mobile apps) org.cordova.quasar.app > Should we run `npm install` for you after the project has been created? (recommended) yarn
quasar info
Operating System - Darwin(15.6.0) - darwin/x64 NodeJs - 12.16.1 Global packages NPM - 6.13.4 yarn - 1.22.4 @quasar/cli - 1.0.5 cordova - Not installed Important local packages quasar - 1.9.13 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 1.6.1 -- Quasar Framework local CLI @quasar/extras - 1.6.1 -- Quasar Framework fonts, icons and animations vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces. vue-router - 3.1.6 -- Official router for Vue.js 2 vuex - 3.1.3 -- state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @capacitor/core - Not installed @capacitor/cli - Not installed @capacitor/android - Not installed @capacitor/ios - Not installed @babel/core - 7.9.0 -- Babel compiler core. webpack - 4.42.1 -- 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 - 3.10.3 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. register-service-worker - 1.7.1 -- Script for registering service worker, with hooks Quasar App Extensions *None installed* Networking Host - **** en0 - ****
file Index.vue inside /src/pages
<template> <div class="q-pa-md"> <q-btn icon="mail">test</q-btn> </div> </template> <script> export default { name: 'PageIndex' } </script>
rendered html
(...) <button tabindex="0" type="button" role="button" class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--wrap q-btn--active"> <div tabindex="-1" class="q-focus-helper"></div> <div class="q-btn__wrapper col row q-anchor--skip"> <div class="q-btn__content text-center col items-center q-anchor--skip justify-center row"> <i aria-hidden="true" role="img" class="material-icons q-icon notranslate">mail</i> test </div> </div> </button> (...)
-
q-btn fails to render icon on-[left|right] css classes
When including an icon inside q-btn, there is no space between the text and the icon (both icon and icon-right), because the <i> element doesnโt have the on-left or on-right class.
I just tried with a fresh 1.9.13 local install and can reproduce the error.
Butโฆ I tested on codepen/jsfiddle and the classes are rendered correctly.
Has anyone have an idea why?
Thanks!