@turigeza Thank you! It works perfectly. This wouldn’t really occur to me.

@metalsadman said in How to prevent the focus of a button in a list item:

tabindex="-1"

Thank you for answer. But I’m not sure for which element I should set this property. I tried it from action buttons to the whole list, but without success. Still when the mouse cursor is over list item, the item has focus, but the first action button as well. Will it have something to do with the hover or mouseOver feature?

I have q-list component and q-item elements in it. Each item contains a section (q-item-section side) with action buttons. How can I prevent the first action button get focus when the mouse cursor hovers over a list element?

<q-list>
  <q-item tag="label" v-for="(item, index) in this.sensors" v-bind:key="index">
    <q-item-section>
      <q-item-label>{{item.name}}</q-item-label>
      <q-item-label caption>{{item.sens}}</q-item-label>
      <q-item-label caption>{{item.descr}}</q-item-label>
    </q-item-section>
    <q-item-section side>
      <div class="row">
        <q-btn flat round color="grey-8" icon="mdi-pencil" />
        <q-btn flat round color="grey-8" icon="mdi-delete" />
      </div>
    </q-item-section>
  </q-item>
</q-list>

@beets Thank you! The issue was in incorrect use of the gutter class. I’m a fool, I missed it. Wrapping the q-img in a div it was not necessary. And of course the width of the column was bad for the three elements, but I saw that immediately after repairing the gutter.

Thanks again

Hi, please advise me.
I need to create a q-img grid (aspect ratio 1: 1), where there will always be three images on the line. I tried it as follows, but the images don’t stretch to the full width of the line (a large gap remains on the right). I’m probably missing something, but I have no idea what.

<div class="q-gutter-xs row">
   <q-img
      v-for="(value, index) in images"
      v-bind:key="index"
      :src="value"
      :ratio="1"
      class="col-3"
   />
</div>

@Allan-EN-GB Thanks again, you helped me a lot. It won’t be that easy with coloring, but I will definitely be able to do it.

@Allan-EN-GB And now I have one last question for you. Is it possible to color your own svg icon? By that I mean that the icon responds to the color property in the q-icon. Do I have to create svg in a special way or is it not possible with SVG at all?

<q-icon color="blue" name="pacman" />

@Allan-EN-GB Great, thank you. It works now. As soon as I moved the icons from /src/assets to /public/appIcons, everything started working. I still have to find out why this is so, but the main thing is that it works Thank you!

@Allan-EN-GB Thank you for answer. The icon not show (this will probably be another problem), but I no longer get a 404 error. A little question: what does the img prefix mean? It is used in the documentation before the svg file, in the example to map icons.

Hi,
I’m trying to map my own SVG icons according to the documentation. But I probably can’t enter the path to the file correctly (I probably don’t understand how it works). I always get a 404 response for icon (resource not found). Can you please advise me how to enter the path to the SVG icon file correctly? The icon is located in the /src/assets/ directory.

I tried:
img:/assets/pac-man.svg
img:~assets/pac-man.svg
img:/src/assets/pac-man.svg
img:./assets/pac-man.svg
and lots of others…

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<script>
const appIcons = {
  'app:pacman': 'img:/assets/pac-man.svg'
}

export default {
  name: 'App',
  created () {
    this.$q.iconMapFn = (iconName) => {
      const icon = appIcons[iconName]
      if (icon !== undefined) {
        return { icon: icon }
      }
    }
  }
}
</script>