No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. cmpscabral
    C
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 5
    • Best 1
    • Groups 0

    cmpscabral

    @cmpscabral

    1
    Reputation
    1
    Profile views
    5
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    cmpscabral Follow

    Best 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!!

      posted in Framework
      C
      cmpscabral

    Latest posts made by cmpscabral

    • RE: Disable Drawer Animation

      Is this possible? Iโ€™d like to disable it also ๐Ÿ™‚ thanks

      posted in Help
      C
      cmpscabral
    • RE: Quasar v2 teaser in a Codepen

      Great news!! ๐Ÿ˜ƒ

      posted in Announcements
      C
      cmpscabral
    • RE: q-btn fails to render icon on-[left|right] css classes

      @s-molinari ๐Ÿ˜ณ ๐Ÿ™„ sorry for the trouble and thank you!!

      posted in Framework
      C
      cmpscabral
    • 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>
      (...)
      
      posted in Framework
      C
      cmpscabral
    • 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!

      posted in Framework
      C
      cmpscabral