Of course, you can use third-party components, but I would like to solve it with a basic q-table.
And so far I have solved the issue with ag-grid, but I want to use q-table. Request to the developers, help with the question if it does not. Your advice will be very helpful.
Hello!
When importing CSS of third-party components, I observe the problem of replacing the current font of the application with the font specified in the imported style:
An example of the contents of a string indicating the font in the imported CSS:
<style>
@import url(“https://fonts.googleapis.com/css?family=Roboto:400,500”);
</style>
As a result of the import, the font of the application changes.
How can I specify that the font in the imported CSS does not override the current font of the application?
As an option, I comment on lines with font import, and everything is fine.
But, this is not the best practice, because the imported style is in the node_modules component.
Thank you in advance for your answers. 
Hello!
I’m trying to find a way to remove all console.log statements from my production build.
I added the build option to quasar.conf.js
build: {
uglifyOptions: {
compress: { drop_console: true }
},
…
}
But, this does not work the “console.log” is not deleted.
Hello!
I am trying to get the following behavior from q-table:
Actually, it’s impossible to make the height of the q-table correspond to the height of the page or container in which the q-table is.
I want to use the style “full-height” but I can’t.
I have to adjust the height through sass
.q-table__middle
max-height: 400px
how to make q-table height automatic across the entire page height ??
<template>
<q-page>
<q-table class=“q-pa-xs my-sticky-header-table” separator=“cell” hide-bottom wrap-cells :pagination.sync=“cfgPagination” row-key=“ID” :data=“dataSet” :columns=“cfgColumns” />
</q-page>
</template>
<style lang=“sass”>
.my-sticky-header-table
.q-table__middle
max-height: 400px
.q-table__top,
thead tr:first-child th
background-color: $grey-4
thead tr:first-child th
position: sticky
top: 0
opacity: 1
z-index: 1
</style>
<script>
export default {
data(){
return {
cfgPagination: {
descending: false,
page: 0,
rowsPerPage: 0
},
cfgColumns:[
{ field: ‘Col1’ , name: ‘Col1’, label: “Column 1”, align: ‘left’, sortable: true, style: ‘width: 200px’ },
{ field: ‘Col2’ , name: ‘Col2’, label: “Column 2”, align: ‘left’, sortable: true, style: ‘width: auto’ },
],
dataSet:[
{ID: 1 , Col1: ‘Record Row 1’ , Col2: ‘Record Row 1’},
{ID: 2 , Col1: ‘Record Row 2’ , Col2: ‘Record Row 2’},
{ID: 3 , Col1: ‘Record Row 3’ , Col2: ‘Record Row 3’},
{ID: 4 , Col1: ‘Record Row 4’ , Col2: ‘Record Row 4’},
{ID: 5 , Col1: ‘Record Row 5’ , Col2: ‘Record Row 5’},
{ID: 6 , Col1: ‘Record Row 6’ , Col2: ‘Record Row 6’},
{ID: 7 , Col1: ‘Record Row 7’ , Col2: ‘Record Row 7’},
{ID: 8 , Col1: ‘Record Row 8’ , Col2: ‘Record Row 8’},
{ID: 9 , Col1: ‘Record Row 9’ , Col2: ‘Record Row 9’},
{ID: 10, Col1: ‘Record Row 10’, Col2: ‘Record Row 10’},
{ID: 11, Col1: ‘Record Row 11’, Col2: ‘Record Row 11’},
{ID: 12, Col1: ‘Record Row 12’, Col2: ‘Record Row 12’},
{ID: 13, Col1: ‘Record Row 13’, Col2: ‘Record Row 13’},
{ID: 14, Col1: ‘Record Row 14’, Col2: ‘Record Row 14’},
{ID: 15, Col1: ‘Record Row 15’, Col2: ‘Record Row 15’},
{ID: 16, Col1: ‘Record Row 16’, Col2: ‘Record Row 16’},
{ID: 17, Col1: ‘Record Row 17’, Col2: ‘Record Row 17’},
{ID: 18, Col1: ‘Record Row 18’, Col2: ‘Record Row 18’},
{ID: 19, Col1: ‘Record Row 19’, Col2: ‘Record Row 19’},
{ID: 20, Col1: ‘Record Row 20’, Col2: ‘Record Row 20’},
{ID: 21, Col1: ‘Record Row 21’, Col2: ‘Record Row 21’},
{ID: 22, Col1: ‘Record Row 22’, Col2: ‘Record Row 22’},
{ID: 23, Col1: ‘Record Row 23’, Col2: ‘Record Row 23’},
{ID: 24, Col1: ‘Record Row 24’, Col2: ‘Record Row 24’},
{ID: 25, Col1: ‘Record Row 25’, Col2: ‘Record Row 25’},
{ID: 26, Col1: ‘Record Row 26’, Col2: ‘Record Row 26’},
{ID: 27, Col1: ‘Record Row 27’, Col2: ‘Record Row 27’},
{ID: 28, Col1: ‘Record Row 28’, Col2: ‘Record Row 28’},
{ID: 29, Col1: ‘Record Row 29’, Col2: ‘Record Row 29’},
{ID: 30, Col1: ‘Record Row 30’, Col2: ‘Record Row 30’},
],
}
}
}
</script>
<q-input v-model=“phone” autofocus mask="+7 (###) ###-##-##" fill-mask />
After showing the field, the default input cursor is set at the end of the input mask and goes to the beginning of the input mask at the beginning of entering the value in the field
How to make sure that after entering autofocus in the field with the fill-mask, the input cursor is set by default at the beginning of the mask input?
Code SandBox:
https://codesandbox.io/s/q-input-autofocus-mask-filled-77ztl?file=/src/pages/Index.vue
Hello!
I’m trying to find a way to remove all console.log statements from my production build.
I added the build option to quasar.conf.js
build: {
uglifyOptions: {
compress: { drop_console: true }
},
…
}
But, this does not work the “console.log” is not deleted.
Hello!
Q-Img: How to disable the use of browser cache (no-cache) when loading an image?
Hello!
I am trying to make a “custom component” that inherits from “q-input”. But, it doesn’t work to achieve that there was a “v-model” binding.
If the component is inherited from the standard “input”, then the “v-model” binding works correctly. What am I doing that the binding for “q-input” does not work correctly?
Code SandBox:
https://codesandbox.io/s/custom-q-input-v-model-binding-problem-ceq4f
// Custom component “qInputExt.vue”
<template>
<!-- NOT WORK V-MODEL BINDING -->
<q-input v-bind="$attrs" v-on="$listeners" :value=“value” @input=“onInput($event.target.value)” />
<!-- WORK V-MODEL BINDING -->
<!-- <input v-bind="$attrs" v-on="$listeners" :value=“value” @input=“onInput($event.target.value)” /> -->
</template>
<script>
export default {
name: ‘qInputExt’,
props: [‘value’],
model: {
prop: ‘value’,
event: [‘update’]
},
data () {
return {}
},
methods: {
onInput (val) {
console.log(’[onInput]’, val)
this.$emit(‘update’, val)
}
}
}
</script>
// Test Component “TestPage.vue”
<template>
<q-page>
<q-input-ext v-model=“testValue” />
</q-page>
</template>
<script>
import qInputExt from ‘components/qInputExt’
export default {
components: { qInputExt },
data () {
return {
testValue: ‘’
}
}
}
</script>
<q-input v-model=“phone” autofocus mask="+7 (###) ###-##-##" fill-mask />
After showing the field, the default input cursor is set at the end of the input mask and goes to the beginning of the input mask at the beginning of entering the value in the field
How to make sure that after entering autofocus in the field with the fill-mask, the input cursor is set by default at the beginning of the mask input?
Code SandBox:
https://codesandbox.io/s/q-input-autofocus-mask-filled-77ztl?file=/src/pages/Index.vue
Please tell me how you can change the style of q-field “readonly” with border-style: dashed on border-style: solid?
Hello!
I ask for advice.
I have a Layout inside of which:
<template>
<q-layout view=“lHh Lpr lFf”>
<q-header>
<q-toolbar>
<q-btn ref="actBtn" label="actionButton">
</q-toolbar>
</q-header>
</q-page-container>
<router-view />
</q-page-container>
</q-layout>
And there is a q-page that appears when navigating a route, displayed inside a q-page-container Layout.
<template>
<q-page>
Blank Page
</q-page>
</template>
<script>
export default {
name: ‘PageBlank’,
components: {
},
data(){
return {
}
},
methods: {
onClick_actBtn(){
console.log(‘onClick_actBtn’)
}
}
}
</script>
How can I make sure that when you click on the ref = actBtn button (which is located on the main Layout), the onClick_actBtn method in the sub page is executed. ???
Hello!
When importing CSS of third-party components, I observe the problem of replacing the current font of the application with the font specified in the imported style:
An example of the contents of a string indicating the font in the imported CSS:
<style>
@import url(“https://fonts.googleapis.com/css?family=Roboto:400,500”);
</style>
As a result of the import, the font of the application changes.
How can I specify that the font in the imported CSS does not override the current font of the application?
As an option, I comment on lines with font import, and everything is fine.
But, this is not the best practice, because the imported style is in the node_modules component.
Thank you in advance for your answers.
Of course, you can use third-party components, but I would like to solve it with a basic q-table.
And so far I have solved the issue with ag-grid, but I want to use q-table. Request to the developers, help with the question if it does not. Your advice will be very helpful.
Hello!
I am trying to get the following behavior from q-table:
Actually, it’s impossible to make the height of the q-table correspond to the height of the page or container in which the q-table is.
I want to use the style “full-height” but I can’t.
I have to adjust the height through sass
.q-table__middle
max-height: 400px
how to make q-table height automatic across the entire page height ??
<template>
<q-page>
<q-table class=“q-pa-xs my-sticky-header-table” separator=“cell” hide-bottom wrap-cells :pagination.sync=“cfgPagination” row-key=“ID” :data=“dataSet” :columns=“cfgColumns” />
</q-page>
</template>
<style lang=“sass”>
.my-sticky-header-table
.q-table__middle
max-height: 400px
.q-table__top,
thead tr:first-child th
background-color: $grey-4
thead tr:first-child th
position: sticky
top: 0
opacity: 1
z-index: 1
</style>
<script>
export default {
data(){
return {
cfgPagination: {
descending: false,
page: 0,
rowsPerPage: 0
},
cfgColumns:[
{ field: ‘Col1’ , name: ‘Col1’, label: “Column 1”, align: ‘left’, sortable: true, style: ‘width: 200px’ },
{ field: ‘Col2’ , name: ‘Col2’, label: “Column 2”, align: ‘left’, sortable: true, style: ‘width: auto’ },
],
dataSet:[
{ID: 1 , Col1: ‘Record Row 1’ , Col2: ‘Record Row 1’},
{ID: 2 , Col1: ‘Record Row 2’ , Col2: ‘Record Row 2’},
{ID: 3 , Col1: ‘Record Row 3’ , Col2: ‘Record Row 3’},
{ID: 4 , Col1: ‘Record Row 4’ , Col2: ‘Record Row 4’},
{ID: 5 , Col1: ‘Record Row 5’ , Col2: ‘Record Row 5’},
{ID: 6 , Col1: ‘Record Row 6’ , Col2: ‘Record Row 6’},
{ID: 7 , Col1: ‘Record Row 7’ , Col2: ‘Record Row 7’},
{ID: 8 , Col1: ‘Record Row 8’ , Col2: ‘Record Row 8’},
{ID: 9 , Col1: ‘Record Row 9’ , Col2: ‘Record Row 9’},
{ID: 10, Col1: ‘Record Row 10’, Col2: ‘Record Row 10’},
{ID: 11, Col1: ‘Record Row 11’, Col2: ‘Record Row 11’},
{ID: 12, Col1: ‘Record Row 12’, Col2: ‘Record Row 12’},
{ID: 13, Col1: ‘Record Row 13’, Col2: ‘Record Row 13’},
{ID: 14, Col1: ‘Record Row 14’, Col2: ‘Record Row 14’},
{ID: 15, Col1: ‘Record Row 15’, Col2: ‘Record Row 15’},
{ID: 16, Col1: ‘Record Row 16’, Col2: ‘Record Row 16’},
{ID: 17, Col1: ‘Record Row 17’, Col2: ‘Record Row 17’},
{ID: 18, Col1: ‘Record Row 18’, Col2: ‘Record Row 18’},
{ID: 19, Col1: ‘Record Row 19’, Col2: ‘Record Row 19’},
{ID: 20, Col1: ‘Record Row 20’, Col2: ‘Record Row 20’},
{ID: 21, Col1: ‘Record Row 21’, Col2: ‘Record Row 21’},
{ID: 22, Col1: ‘Record Row 22’, Col2: ‘Record Row 22’},
{ID: 23, Col1: ‘Record Row 23’, Col2: ‘Record Row 23’},
{ID: 24, Col1: ‘Record Row 24’, Col2: ‘Record Row 24’},
{ID: 25, Col1: ‘Record Row 25’, Col2: ‘Record Row 25’},
{ID: 26, Col1: ‘Record Row 26’, Col2: ‘Record Row 26’},
{ID: 27, Col1: ‘Record Row 27’, Col2: ‘Record Row 27’},
{ID: 28, Col1: ‘Record Row 28’, Col2: ‘Record Row 28’},
{ID: 29, Col1: ‘Record Row 29’, Col2: ‘Record Row 29’},
{ID: 30, Col1: ‘Record Row 30’, Col2: ‘Record Row 30’},
],
}
}
}
</script>