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. Tags
    3. css
    Log in to post
    • A

      Replace material icon with my own custom icon
      Help • css custom icon icons scss • • acros

      5
      0
      Votes
      5
      Posts
      60
      Views

      T

      @acros, as @Hawkeye64 mentioned - in my case it’s [ in App.vue ]

      created () { this.$q.iconMapFn = (iconName) => { if (iconName.startsWith('chevron_left') === true) { return { cls: 'fal fa-chevron-left' } } if (iconName.startsWith('chevron_right') === true) { return { cls: 'fal fa-chevron-right' } } } },
    • A

      Use my own css
      Help • css layout styling • • acros

      5
      0
      Votes
      5
      Posts
      129
      Views

      T

      @acros

      You can see what becomes of q-layout in chrome inspector.

      Screen Shot 2020-11-09 at 16.19.17.png

      If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.

      As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?

      So the options are

      a, Style your custom component so it is compatible with q-layout.
      b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
      c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

    • I

      Home link style in a Layout Drawer
      Framework • css layout drawer q-toolbar-titl • • Incremental

      4
      0
      Votes
      4
      Posts
      112
      Views

      I

      Thanks all, I ended with :

      <router-link to="/" class="text-white text-bold" style="text-decoration: none;" >Title</router-link>
    • G

      How to use custom scss?
      Framework • css quasar cli scss • • gvillela7

      6
      0
      Votes
      6
      Posts
      256
      Views

      dobbel

      @gvillela7 that’s very nice you have it working. I am wondering what does the combination of Bootstap and quasar components look like? They play along nicely?

    • D

      For components provide a stylus alternative file that uses (more) variables
      Framework • classes css elements focus stylus • • dgk

      2
      0
      Votes
      2
      Posts
      81
      Views

      s.molinari

      Hi dgk. Thanks for the input and feedback. If I may ask, would you be interested in creating an RFC for your thoughts to improve Quasar in terms of Design/ Styling/ Theming for v2.0? Don’t keep yourself reduced to this situation, but go “hog wild” in imagining a new way of designing with Quasar.

      This is just me, but my wish would be that components aren’t styled in any one way to begin with. But rather, they are first “styleless”. Then, there would be a “core Design” that can be added to your app (i.e. Material, Bootstrap, Tailwind, etc.). Then there would be a “Theme” choice or even set of choices that can be added. But, that is just me and my ideas. I’m not a designer. 😁

      We can continue this discussion here, if you’d like. I guess bottom line is, this suggestion more than likely won’t be done. But, for v2.0, we can make designing in Quasar even better.

      Scott

    • B

      Using Quasar without its styles
      Help • css • • btree

      1
      0
      Votes
      1
      Posts
      21
      Views

      No one has replied

    • D

      Apply CSS to dynamically loaded HTML
      Help • cordova css • • dsky

      2
      0
      Votes
      2
      Posts
      667
      Views

      benoitranque

      This is most likely a cordova issue.

    • T

      Disable ripple effect lagging (trying to implement css solution)
      Help • css javascript ripple v-ripple • • theuzz1

      2
      0
      Votes
      2
      Posts
      1148
      Views

      a47ae

      It is proposed for v0.15 to disable the ripple effect: https://github.com/quasarframework/quasar/issues/696

    • a47ae

      Placing buttons after QField
      Help • button css form q-input styling • • a47ae

      1
      0
      Votes
      1
      Posts
      1065
      Views

      No one has replied

    • druppy

      CSS platform detection ?
      Framework • css • • druppy

      8
      0
      Votes
      8
      Posts
      2783
      Views

      bl

      Ok, so … if we could make WebPack build the two themes as two separate css bundles, we could load these after platform detection ?

      I tried to do this (separating the css file from the main bundle), as we like our customers design requests separate from the main logic, but at the moment we let the http server do the mapping of these files.

    • D

      Styling search bar with select and button component
      Help • css styling • • David

      3
      -1
      Votes
      3
      Posts
      1577
      Views

      D

      Thank you Scott

    • K

      Can you style normal elements with Quasar?
      Help • css html select • • kosciak

      2
      0
      Votes
      2
      Posts
      1302
      Views

      rstoenescu

      Select documentation: http://quasar-framework.org/components/select.html
      You need a model and options. Options object looks like this (just an example):

      selectOptions: [ { label: 'Google', value: 'goog' }, { label: 'Facebook', value: 'fb' }, ... ]

      Use Vue computed properties if needed 😉