We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Issues with vuetify & syncfusion

Hi, I'm using various syncfusion components in my vuetify project.
I have some issues with vuetify tooltips and vuetify drawer.
Let me explain:
  • In my syncfusion grid I have a column with a vuetify button wrapped in a vuetify tooltip (rendered trough syncfusion template), it works, but wen I click the button and get redirected to neavigation endpoint, te tooltip freezes on the page and stay there until I refresh the page...is there any way to fix this?
  • The vuetify drawer (that hides and shows with a button) works fine in all the pages except the page where I have the syncfusion grid, where it hides but the page is not resized to fill the spece that the drawer was keeping befor gets hidden... how can I solve that?
Thanks!

6 Replies

AS Alessio Simoni April 16, 2019 09:48 AM UTC

up


TS Thavasianand Sankaranarayanan Syncfusion Team April 16, 2019 12:16 PM UTC

Hi Alessio, 

Thanks for contacting Syncfusion support. 

We have analyzed the problems you are facing, we suspect that the problem may be with the “Vuetify” component.  

Query 1 : the tooltip freezes on the page and stay there until I refresh the page 
Here you have mentioned the tooltip of the vuetify component freezes. So this may be the problem generated from the “Vuetify” component side, when integrating the vuetify component with Syncfusion Grid. This is why the tooltip freezes. So we suggest you to check with “veutify” for the problem. 

Query 2 : The vuetify drawer (that hides and shows with a button) 
We suspect that the problem arise due to some css override between the Syncfusion Grid and Vuetify component. So we suggest you to check for the override of css while intergrating these components. If so, then we suggest you to customize the styles based on your requirement. 

And also we need more details to further look into this and provide a solution and check for the problem is from Syncfusion grid or vuetify component. Could you please share a simple demo sample with the problems you are facing in your application. So that we could validate further and assist you on this scenario. 

Regards, 
Thavasianand S. 



AS Alessio Simoni April 17, 2019 09:18 AM UTC

Hi, thanks for the suggestions!

I solved the drawer issue (it was related to the template used a column of the grid).

the tooltip problem, persists...
I tryied to replace vuetify v-tooltip with syncfusion tooltip (@syncfusion/ej2-vue-popups) but the problem persists...

this is the column of the grid that uses v-tooltip/syncfusion-popup:
<e-column
field="id_box"
headerText="EDIT"
:template="editTemplate"
:allowFiltering="false"
textAlign="Right"
>e-column>

in the editTemplate I have this:

< v-tooltip top>
< v-btn slot="activator" outline small icon @click="edit()">
< v-icon small>edit < v-icon>
< v-btn>
< span>Edit< span>
< v-tooltip>
    

and this is my edit() method:
edit () {
router.push('/edit/' + this.data.id_box);
}
when I click the button (wrapped in v-tooltip or syncfusion popover), the router navigate to the new view, but the tooltip remains on
the page and I cannot remove it...it stays there forever even if I navigate to a new page, the only way to remove it is to reload the page.
Any suggestion?

Thanks!


PS Pavithra Subramaniyam Syncfusion Team April 17, 2019 10:11 AM UTC

Hi Alessio, 
 
Thanks for your update. 
 
Query : the router navigate to the new view, but the tooltip remains on the page and I cannot remove it 
 
We have prepared a sample to check the syncfusion grid component’s interference in the vuetify tooltip component during the destruction of the components, but we are unable to reproduce such kind of issue in the grid component side. So we would like you to verify it from the vuetify component for any errors. Please refer to the below sample for your reference, 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 
 



AS Alessio Simoni April 18, 2019 08:11 AM UTC

thanks for your answer.
Your example works fine, but if you change the edit method to:

edit () {
router.push('/someurl')
}

you will see the problem.
when the routing starts and change the view, the tooltip stays there on the screen and does not disapper...



TS Thavasianand Sankaranarayanan Syncfusion Team April 24, 2019 05:58 AM UTC

Hi Alessio, 

We have analyzed the reported problem. We could reproduce the problem during routing only when the template has the “Vuetify app”(v-app). If the template has a normal div, then the tooltip problem is not arising. So we suspect that the problem is with the Vuetify. We are attaching the sample with proper destroying of Vuetify tooltip with normal div for your convenience, please download the sample form the link below, 

We searched for the similar problem over the internet and found some general solutions involving the same problem you are facing and which could solve the problem you are facing. Please refer the general link for more information, 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon