We have an application in VueJs, in the home page everything works fine.
When we load the page on mobile, we have few problems on scrolling, if we touch the chart and try to scroll the page down, the touch it's like intercepted from the chart and make the scoll impossible.
So in order to scroll the page we have to start scrolling from outside the chart.
I tried to add in the chart options the following events: ['mousemove', 'mouseout', 'click',], thinking that like so it would exclude the touch options, but it dosen't work as well.
I've also tried with the following but no success.
tooltips: {
enabled: false
},
events: [],
Any suggestion? Thankyou so much.
after few hours I've found a solution.
Seems like that in the canvas of the chart there is a css propriety touch-action: none; setting that one to touch-action: unset solved my problem.
<template>
<canvas class="chart-mobile" ref="canvas"/>
</template>
<style scoped>
.chart-mobile {
touch-action: unset !important;
}
</style>
Related
I'm using Katex together with Vuetify. There is a problem with certain classes like accent or overline used by both Katex and Vuetify. This leads to weird stylings like the one you can see below. The overline characters got my accent styling.
I used a vue-katex component like this:
<katex-element expression="\hat A \overline{B} \widetilde{\phi}" />
This is how the equation looks like:
These are the vuetify styles:
This doesn't work:
.v-application .accent {
all: unset !important;
}
How can I disable all Vuetify styles for katex-elements?
There's an open issue on the KaTeX github about this: https://github.com/KaTeX/KaTeX/issues/1456
You can either disable the Vuetify theme:
https://vuetifyjs.com/en/features/theme/#disable-theme
new Vuetify({
theme: { disable: true },
})
Or use web components to isolate the KaTeX CSS, such as katex-elements instead of vue-katex.
Just had the same problem and putting this into one of my Vue components that uses Katex fixed it for me:
<style lang="scss">
span {
.mord.accent {
background-color: inherit !important;
border-color: inherit !important;
}
}
</style>
I'm trying to create an alert component in VueJS/nuxtjs that will model the behavior of a snackbar (in this case fixed-bottom position, where it is fixed at the bottom when we scroll, so we see the alert as we're scrolling.)
For some reason I couldn't find much documentation on it. I've gone thru the alert component API on vuetify, and compared it to the snackbar component, but still can't seem to figure out why it's not working.
I've tried changing the position to absolute and it works, but for some reason instead of being fixed-bottom as the page scrolls it's literally fixed at the bottom and the user can't see the alert until they scroll down to the end of the page... when I use a snackbar component it works just fine, but I like the icon that alert comes with, hence the reason for using that component instead. I'll attach the code for the alert, as well as its parent component:
parent:
<div class="help-center-page max-w-none">
alert component:
<div class="text-center">
<v-alert :dismissible="true" prominent type="error">
This is an alert.
</v-alert>
</div>
The following CSS in the <style> section worked for me:
.v-alert {
position: fixed;
left: 50%;
bottom: 50px;
transform: translate(-50%, -50%);
margin: 0 auto; // Without this the box extends the width of the page
}
I have completed an installation of fontawesome in Nuxt with this fantastic link;
https://github.com/FortAwesome/vue-fontawesome
I have a spinner rendered as
<font-awesome-icon :icon="['fas','spinner']" />
The spinner does not spin, it is static.
I added fa-spin as
<font-awesome-icon :icon="['fas','spinner', 'spin']" />
This caused the error in the console Could not find one or more icon(s) undefined
Can anyone point me in the right direction, show me how to get my spinner spinning.
The relevant portion on the nuxt.config.js
modules: [
'nuxt-fontawesome'
],
//font-awesome
fontawesome: {
imports: [
{
set: '#fortawesome/free-solid-svg-icons',
icons: ['fas']
},
],
},
build: {
config.resolve.alias['#fortawesome/fontawesome-free-brands$'] = '#fortawesome/fontawesome-free-brands/shakable.es.js'
config.resolve.alias['#fortawesome/fontawesome-free-solid$'] = '#fortawesome/fontawesome-free-solid/shakable.es.js'
}
In the component("../pages/index.vue") it is;
<template>
<div>
<font-awesome-icon :icon="['fas','spinner','spin' ]" />
</div>
</template>
As suggested by #Steve, i have created a Glitch workspace
https://glitch.com/edit/#!/join/d57a5054-b448-4a53-ad37-d9465b0cef8b
You can add the spin directive.
<font-awesome-icon icon="spinner" spin />
Docs: https://github.com/FortAwesome/vue-fontawesome#basic
This works for me:
<template>
<div>
<font-awesome-icon icon="spinner" class="fa-spin" />
</div>
</template>
Font Awesome v.5, Vue.js v.2 (with #vue/cli 3)
Unless times have changed, Font Awesome does not provide out-of-the-box tools to animate their font and graphic libraries. They simply provide the service of offering single-colored, vector-graphic libraries formatted for various needs: true-type fonts (TTF), scalable vector graphics (SVG), etc.
You'll need to do the animation work yourself. Fortunately, it's very short work with CSS plus you'll get to control the speed of your spinner spinning.
/* Define an animation behavior */
#keyframes spinner {
to { transform: rotate(360deg); }
}
/* This is the class name given by the Font Awesome component when icon contains 'spinner' */
.fa-spinner {
/* Apply 'spinner' keyframes looping once every second (1s) */
animation: spinner 1s linear infinite;
}
I've updated the Glitch workspace you created (very helpful) with the additional CSS lines above to animate. Adjust accordingly and good luck!
I am trying MapBox with Vue 2 and I cannot make the map take the full width of the container. It only renders on 50% of the width of the container.
I have included the files in the head of my index.html as follows:
<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
I want the map in a component (Map.vue, I am using vue-router), so here is the code in Map.vue:
Script:
import Mapbox from 'mapbox-gl-vue';
export default {
components: {
'mapbox': Mapbox
}
}
Template:
<mapbox access-token="pk.eyJ1Ijoic3BlZW5pY3Q....."
:map-options="{
style: 'mapbox://styles/mapbox/streets-v9',
center: [-96, 37.8],
zoom: 3
}"
:geolocate-control="{
show: true,
position: 'top-left'
}"
:scale-control="{
show: true,
position: 'top-left'
}"
:fullscreen-control="{
show: true,
position: 'top-left'
}">>
</mapbox>
Style:
#map {
width: 100%;
height: 600px;
position: absolute;
margin:0;
z-index:1;
}
I have tried everything I know in the CSS id but it only renders the map in the right half of the width of the container, in the left one only the logo and the controls are displayed while the rest of the area is empty.
To solve the problem, I just had to delete "text-align: center;" from #app in App.vue.
For more details, check the issue I had opened here:
https://github.com/phegman/vue-mapbox-gl/issues/11
It looks like to me, there is something dynamic with the div or the div is rendered later after the instantiation. I have not used vue, however.
I have had this problem with tabs and div rendered after the page load such as in tabs or triggered by JavaScript.
If you use map.invalidateSize(); where map is the object instantiated. This will redraw the map. Try and put this after the window is loaded to test the code. Then perhaps it can be converted into the correct Vue implementation.
window.addEventListener("load", function(){
map.invalidateSize();
});;
I need to use v-carousel without the bottom control panel. It's useless when number of images more than 20. Is it possible to hide it?
You just need to add the hide-delimiters prop. You can find all carousel props here: VuetifyJS API
<v-carousel hide-delimiters>
[...]
You can do that with css:
.carousel .carousel__controls { display: none; }