Changing active class color in dropdown list



  • How can I change active class color of the item in dropdown list that is used in Q-Table? The one that is supposedly higlighting columns that are chosen to blue. However somehow in my case they are not higlighted.
    I tried using

    .q-item.q-router-link--active, .q-item--active {
      color: blue;
    }
    

    However it wont work. Whenever it is selected or not the color remains the same.

    Here is my table

    <q-table
    
      flat
      bordered
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
      hide-bottom
      class="sticky-header"
        :visible-columns="visibleColumns"
    >
          <template v-slot:top>
        <img
          style="height: 50px; width: 50px"
          src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg"
        >
    
        <q-space />
    
        <q-select
          v-model="visibleColumns"
          multiple
          outlined
          dense
          options-dense
          :display-value="$q.lang.table.columns"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          options-cover
          style="min-width: 150px"
        />
      </template>
    </q-table>


  • Maybe I’m missing something in your code but your class is setting a color for <q-item> and in your example I can’t find <q-item>. So my guess is that you’re not addressing the correct component.

    I could be wrong as I’m just a newbie starting with Vue and Quasar. But I still wanted to help you a bit.


Log in to reply