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.