CSS styling of components, unexpected sideffects



  • 0_1501342674264_Untitled.png

    johncloud200 @johncloud200 20:38
    <q-chip pointing=“up” color=“primary”>up</q-chip>
    I try the example q-chip, just got rounded without pointing(arrow), why?

    johncloud200 @johncloud200 21:57
    <q-layout class=“bg-light”>
    <q-chip pointing=“up” color=“primary”>up</q-chip>
    </q-layout>
    I just remove class=“bg-light”

    Laurent @spectrolite 22:02
    So background color was = to text color?

    Laurent @spectrolite 22:04
    And removing bg-light from wrapping div fixed your problem?

    johncloud200 @johncloud200 22:06
    yes

    Laurent @spectrolite 22:11
    All CSS color classes as well as bg-colors (eg. bg-light) have !important
    So they should be used mostly on “leaf” dom nodes, to correct the defaults, instead of higher up in the dom, where they can have unexpected sideffects

    Laurent @spectrolite 22:16
    @johncloud200 pls cut and paste this discussion into a forum topic mentioning @rstoenescu He needs to know about this, and decide whether to add a warning in the docs, or to reinforce the CSS styling of components against these issues.
    I m in mobile so it s quite impractical.for.me to do

    johncloud200 @johncloud200 22:17
    yes I will

    Laurent @spectrolite 22:18
    Thank you



  • @johncloud200 those gifs are a great addition and make it extremely clear. Thanks.

    @rstoenescu please consider this for the UI fixes of 0.14 final.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.