Incubator-superset: Table th bug when switch Tabs

[aaa92729]

repost Tabs of bug #8195
Hello, I have a Bug about tabs. Switching tabs will cause the width of the th table to become 0 px

Expected results

The page should not refresh after TAB toggle

Actual results

The header is automatically indented
what actually happens.
width to become 0px

Screenshots

If applicable, add screenshots to help explain your problem.

How to reproduce the bug

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Environment

(please complete the following information):

• superset version:0.34.1
• python version: 3.6.6
  

  Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• [ √] I have checked the superset logs for python stacktraces and included it here as text if there are any.
• [ √] I have reproduced the issue with at least the latest released version of superset.
• [ √] I have checked the issue tracker for the same issue and I haven't found one similar.

Additional context

Add any other context about the problem here.

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label #bug to this issue, with a confidence of 0.98. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[mistercrunch]

🏷 test

[mistercrunch]

🗑 🏷 test

[suddjian]

🏷 frontend

[nytai]

@aaa92729 I've tried reproducing your bug and after changing back and forth between a few tabs I was able to git the table chart into a state where the headers were a different width than the columns. However, as soon as I opened the chrome console the chart rerendered and the headers were back to the same height.

Could you provide any additional steps to reproduce this issue consistently?

[aaa92729]

@aaa92729 I've tried reproducing your bug and after changing back and forth between a few tabs I was able to git the table chart into a state where the headers were a different width than the columns. However, as soon as I opened the chrome console the chart rerendered and the headers were back to the same height.

Could you provide any additional steps to reproduce this issue consistently?

Thanks for reply！You can add some tables in each tabs.When table already rendered,click f12,after that switch next tabs,then return last tab,it will reproduce this issue,the table in first tab will collapse...(pivot table is ok ,only in common table)

[skillnull]

I had the same problem！

[PRamia]

Hi guys,

this bug persists, and i hope that the developers fix it soon.

Anyway, i found a working solution just adding a script into the superset javascript file. In my case i am using the docker version (docker-compose). If you do not use Superset with Docker, just try to find the frontend javascript files, i.e. with the browser console. So in my case i go first into the Superset Docker container with:

$ docker ps
$ docker exec -ti --user root yourContainerID bash

once there we'll need a text editor, like vim, so install it there:
$ apt-get update
$ apt-get upgrade
$ apt-get install vim

then navigate to the folder /usr/local/lib/python3.6/site-packages/superset/static/assets/dist/

$ cd /usr/local/lib/python3.6/site-packages/superset/static/assets/dist/

check the existing files:

$ ls

the javascript files there have kind of random generated names, so in my case i edit the file 37.6a8767f3d3757c9b0f62.chunk.js

$ vim 37.6a8767f3d3757c9b0f62.chunk.js

Once there, add this code on the top of the existing code:

$(document).ready(function() {
console.log('Custom Script running... ')
var tabs = window.document.querySelectorAll('[role="tab"]');
let myFunction = function() {
setTimeout(() => {
for (i = 0; i < window.document.getElementsByClassName('dataTables_scrollHead').length; i++) {
window.document.getElementsByClassName("dataTables_scrollHead")[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll('[role="menuitem"]')[0].click()
}
}, 200)
};
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', myFunction, false);
}
});

This code just adds an event listener to every tab "button", so when it is clicked, a function looks for every table and refreshes it.

A bad hack, i know, but at least it works.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.

[PRamia]

hi,

i can use my override solution, but it is not the optimal solution. I have installed now the last superset version and i still seeing the same problem.