No More Posting New Topics!

acros

aha, interesting. I didnt knew that.

acros

My scrollbars doesnt display on android but works fine running in the browser. Are there somewhere in the configuration I need to enable scrollbars? Or something else?

My code is simply something like this. As you can see. Works with scrollbar but when I run it as android application through android studio emulator the scrollbar wont display.

codepen:
https://codepen.io/haangglide/pen/ExgjOXX

<div id="app">
 <div class="session-container">
    <div class="session-content-container">
      <div
           v-for="item in comments"
           :key="item.message"
           class="session-content"
           >
        {{ item.message }}
      </div>
      <div class="prevsession-arrow"></div>
    </div>
  </div>
</div>

var app = new Vue({
  el: '#app',
  data: {
      comments: [
      { message: "This is my message number one!" },
      { message: "This is my message number two!" },
      { message: "This is my message number three!" },
      { message: "This is my message number four!" }
    ]
  },
});

acros

I got this pen with a qtable.
https://codepen.io/haangglide/pen/WNGbYXr

Im storing data in a json table with the following structure:

[
  {
    "id": 1,
    "name": "Diana", 
    "age": 5,
    "location": "Mumbai",
    "color": "blue"
  },
  {
    "id": 2,
    "name": "Billy",
    "age": 4,
    "location": "Detroit",
    "color": "green"
  },
  {
    "id": 3,
    "name": "Mimmi",
    "age": 3,
    "location": "New York",
    "color": "green"
  }
]

This works fine but I need to have another structure on my data with a nested properties object for other situation in my application. I need this structure:

[{
    "id": 1,
    "properties": {
      "name": "Diana",
      "age": 5,
      "location": "Mumbai",
      "color": "blue"
    }
  },
  {
    "id": 2,
    "properties": {
      "name": "Billy",
      "age": 4,
      "location": "Detroit",
      "color": "green"
    }
  },
  {
    "id": 3,
    "properties": {
      "name": "Mimmi",
      "age": 3,
      "location": "New York",
      "color": "green"
    }
  }
]

How can I populate a table with this structure instead?

Here is my javascript:

new Vue({
  el: '#q-app',
  data () {
    return {
      loading: false,
      filter: "",
      rowCount: 10,
        columns: [
        {
          name: "name",
          required: true,
          label: "Name",
          align: "left",
          field: "name",
          sortable: true
        },
        {
          name: "age",
          required: true,
          label: "Age",
          align: "left",
          field: "age",
          format: val => `${val}`,
          sortable: true
        },
        {
          name: "location",
          required: true,
          label: "Location",
          align: "left",
          field: "location",
          format: val => `${val}`,
          sortable: true
        }
      ],
      data: [
        {
          id: 1,
          name: "Diana", 
          age: 5,
          location: "Mumbai",
          color: "blue"
        },
        {
          id: 2,
          name: "Billy",
          age: 4,
          location: "Detroit",
          color: "green"
        },
        {
          id: 3,
          name: "Mimmi",
          age: 3,
          location: "New York",
          color: "green"
        }
      ]
    }
  },

 methods: {
    tableFormat(val) {
      console.log(val)
      if (val.color === "blue") {
        return "marked-row";
      } else {
        return "unmarked-row";
      }
    }
  }
})

and html:

<div id="q-app">
  <div class="q-pa-md">
    <q-table
        :data="data"
        :columns="columns"
        row-key="id"
        :filter="filter"
        :loading="loading"
        :rows-per-page-options="[5]"
    >
        <template v-slot:body="props">
          <q-tr :props="props" :class="tableFormat(props.row)">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              {{col.value}}
            </q-td>
          </q-tr>
        </template>
    </q-table>
  </div>
</div>

acros

How can I insert an image on one row of my table? I have tried to put v-if in my loop through the columns but I cannot get it right. I am pretty new to quasar so I might confuse things. My idea was to use the v-if for checking if the column name is ‘Image’ insert an image. And only in that column

My columns are Name, Age and Image

Here is my code:

    <template v-slot:body="props">
      <div class="row-spacing"></div>
      <q-tr
        :props="props"
        :class="tableFormat(props.row)"
        @click="onRowClick($event, props.row)"
      >
        <q-td
          class="td-my"
          v-for="col in props.cols"
          :key="col.name"
          :props="props"
          >{{ col.value }}
          <div v-if="col.name === 'Image'">
            <img class="profile-img" :src="profileimg[0].url" />
          </div>
        </q-td>
      </q-tr>
    </template>

acros

I got this table I want to color each row in a color depending on my data.
This works but seems to disable my onclick event in q-table for some reason.
@row-click="onRowClick"

I cannot figure out why this is happening. Im new to quasar and to be honest Im not 100% sure how this referens works
v-slot:body="props"

Eventually I want this to be a router event taking me to a different page on click.

<div id="q-app">
  <div class="q-pa-md">
    <q-table
        :data="data"
        :columns="columns"
        row-key="id"
        :filter="filter"
        :loading="loading"
        :rows-per-page-options="[5]"
        @row-click="onRowClick"
    >
<!-- If I remove the template here the onRowClick works     -->
        <template v-slot:body="props">
          <q-tr :props="props" :class="tableFormat(props.row)">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">{{
              col.value
            }}</q-td>
          </q-tr>
        </template>
    </q-table>
  </div>
</div>

CSS:

.marked-row {
  background-color: green;
}
.unmarked-row {
  background-color: blue;
}

new Vue({
  el: '#q-app',
  data () {
    return {
      loading: false,
      filter: "",
      rowCount: 10,
        columns: [
        {
          name: "name",
          required: true,
          label: "Name",
          align: "left",
          field: "name",
          // format: val => `${val}`,
          sortable: true
          // style: 'width: 500px'
        },
        {
          name: "age",
          required: true,
          label: "Age",
          align: "left",
          field: "age",
          format: val => `${val}`,
          sortable: true
        },
        {
          name: "location",
          required: true,
          label: "Location",
          align: "left",
          field: "location",
          format: val => `${val}`,
          sortable: true
        }
      ],
      data: [
        {
          id: 1,
          name: "Diana", 
          age: 5,
          location: "Mumbai",
          color: "blue"
        },
        {
          id: 2,
          name: "Billy",
          age: 4,
          location: "Detroit",
          color: "green"
        },
        {
          id: 3,
          name: "Mimmi",
          age: 3,
          location: "New York",
          color: "green"
        },
        {
          id: 4,
          name: "Bengan",
          age: 4,
          location: "Dubai",
          color: "blue"
        },
        {
          id: 5,
          name: "Chloe",
          age: 7,
          location: "Paris",
          color: "green"
        },
        {
          id: 6,
          name: "Ben",
          age: 6,
          location: "Los Angeles",
          color: "blue"
        }
      ]
    }
  },

 methods: {
    tableFormat(val) {
      console.log(val)
      if (val.color === "blue") {
        return "marked-row";
      } else {
        return "unmarked-row";
      }
    },
    onRowClick(evt, row) {
      console.log("clicked on ", row );
    }
  }
})

Here is my pen:
https://codepen.io/haangglide/pen/MWeRaJW

acros

Thanks. Yes I saw that page but as far as I understand I cannot reach and modify the class that calls the icon that easy since it is inside the component. Im pretty new to quasar after using vue but its not obvious to me how to reach the classes inside the component. In my case I obviously want to replace this:

<i aria-hidden="true" role="img" class="material-icons q-icon notranslate">chevron_left</i>

with something like this:

<i aria-hidden="true" role="img" class="my-custom-icon"> </i>

.my-custom-icon {
    background-image:url("../assets/icon_back.png");
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;
}

but cannot really see how this will be done except for the solution I already tried. It seems like a bit of a hack though to me … or is maybe something like this fine where Im simply overriding the css with my own using fontawsome-v5

<i aria-hidden="true" role="img" class="fas fa-chevron-left q-icon notranslate"> </i>

and

.fa-chevron-right {
    background-image:url("../assets/quasar-logo-full.svg");
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;
}

This do work but again seems like a hacky solution?

acros

Im using the table component:
https://quasar.dev/vue-components/table

but want to replace the icon with my own custom icons. In chrome inspector it says for example:

<i aria-hidden="true" role="img" class="material-icons q-icon notranslate">chevron_left</i>

How can I replace this “chevron_left” with “mycustomimg.png”

This works but seems like a bit of a hack more than a proper solution:

framework: {
      iconSet: 'fontawesome-v5',

leaving this result:

<i aria-hidden="true" role="img" class="fas fa-chevron-left q-icon notranslate"> </i>

and then change the css

.fa-chevron-left:before{
    background-image:url("../assets/icon_back.png");
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;
    content:"";
}

How is the proper way of doing this?

acros

Thanks. Now I just did a custom solution that works even though Im not exactly are using quasar by creating an custom header component like below. This is probably how I would have done it in vue. Dont know if there are any reason for not doing like this in quasar? Basically I find it a bit confusing and it is not obvious for me how to modify the built in classes and get them to behave the way I want. For example class="q-layout-container overflow-hidden" where is this hiding?

Header

<template>
  <div>
    <header id="header-img">
    </header>
  </div>
</template>

MyLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <Header />
  </q-layout>
</template>

<script>
import Header from "./Header";

export default {
  name: "My layout",
  components: {
    Header
  },
  data() {
    return {};
  }
};
</script>

acros

Im new to Quasar but have worked a lot with vue. I want to place a header image by using my own css but nothing seems to happen when I insert my backgroundimage in a div.

How come the headerimg below is not displayed? My guess was that I can combine everything with my own custom css (or only use my own css if I decide to make that choice) as I like or are there something I have to consider doing this?

An example below:

MyLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <div id="header-img"></div>ds
  </q-layout>
</template>

<script>
export default {
  name: "My layout",
  data() {
    return {};
  }
};
</script>

app.scss

#header-img {
  background-image: url("../assets/myheaderimg.png");
  background-repeat: repeat-x;
  height: 100%;
  z-index: 20;
  top: 0px;
  left: 0px;
  position: absolute;
}

routes.js

const routes = [{
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
  },

acros

Im building an application only for tablet and I want to use my own font in ttf format. How can I load .ttf fonts into quasar?

Another option would be to convert it to woff?

I have tried this in app.scss but it didnt work:

@font-face {
  font-family: 'MyFont';
  src: url('css/fonts/MyFont.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

.my-custom-font {
  font-family: 'Cookies', Fallback sans-serif;
}

acros

I got a vue project I worked with for a while. I want to turn this into a mobile app using quasar. I thought the Vue-cli-plugin should be the solution but it did replace the content of my app.vue etc.

Are there any other easy way or do I need to do it manually from start?

No More Posting New Topics!

Posts made by acros