QCard assumes any color I set is dark?

  • Hello, I’ve noticed that no matter what color I pass as the color prop to QCard, it colors the text white and adds a q-card-dark class to the outermost <div> of the QCard, which also causes the separator to be white.

    This happens even when setting the color to white, which means the QCard appears completely blank.

    Is this a bug? Or can this be overriden? I know I can pass the textColor prop to override the text color, but this doesn’t change the color of the separator.

  • That does not happen in my code. There must be something wrong. Here’s an example. I’m using sockets to send database notifications to the client. If the sockets goes down, I show this modal that uses q-card:

      <q-modal v-model="openModal" no-esc-dismiss no-backdrop-dismiss no-route-dismiss position="top" @hide="onClose" style="min-width: 380px;">
            <q-icon name="fas fa-exclamation-circle" color="red-6" /> Your Connection Has Been Lost
            <div class="row justify-center">
              <div class="col">
                <p>You will be automatically reconnected when the server is available.</p>
                <p>The server may be down or inaccessible. You could also check if you have an internet connection.</p>
                <p>If the problem persists contact your System Administrator.</p>
                <p>{{ serverErrorMessage }}</p>

  • It doesn’t seem like you’re setting the color of the QCard though?

  • I am experiencing a similar issue when setting q-card to color=“white”. All text is white and non colored buttons look invisible.

     <q-card color="white">
         <p>You cannot see me!</p>
         <q-btn label="Peek-a-boo"></q-btn>
         <q-btn label="I'm White, but inherit" color="white"></q-btn>

  • Getting the same issue

  • Admin

    Added a Boolean dark prop to QCard, to be used only when the color is dark. Will be available in Quasar v0.17.13.

Log in to reply