Incubator-superset: UI not adaptive on mobile devices

[izetex]

Superset version

Superset 0.19.0

Expected results

When view on mobile device, it makes adaptive UI with useable fonts, images, graphs

Actual results

It renders the same as on desktop, but with broken layout - the blocks are located on wrong places.

Steps to reproduce

Create a dashboard and view on mobile phone

[mistercrunch]

Which view(s) specifically?

[izetex]

Dashboard first of all

[mistercrunch]

We use react-grid-layout which has a responsive grid. On small screen it has less columns (8 instead of 12 I believe) and that forces the layout to change. Dashboards may have to be designed with that in mind.

I'm not sure what else we can do to accommodate small screens, ideas are welcomed.

[izetex]

Try add

<meta name="viewport" content="width=device-width, initial-scale=1.0">

to head section - may be it helps

[xrmx]

@izetex it would be nice if you can try that and open a PR if it makes things better

[mistercrunch]

Notice: this issue has been closed because it has been inactive for 242 days. Feel free to comment and request for this issue to be reopened.

[D-Mahajan]

Any relevant and productive updates on the responsiveness issue?

[gbrian]

What about having some sort of special tabs for different resolutions @mistercrunch?

We can load one or another tab based on device and will still compatible with current grid designer

[gbrian]

Me again... what about adding @media (max-width:800px) for tabs?
Example:

Some JS to do the effect:

[kalimuthu123]

hi i am needing such ui adaptive feature @gbrian gbrian

[gbrian]

@kalimuthu123 , currently is on-hold due to other tasks on my project. For sure I'll get back to it but can't manage now, sorry :(
I'll keep you updated on this thread

[kalimuthu123]

Hi @gbrian ,
any update on the above feature level

[gbrian]

Hi @kalimuthu123, you find me me testing vvvb.js 😅 was on my mind for long... Is a POC to have a CMS approach dashboard creation that can benefit from templates and responsiveness at the time anyone can build their own pages. This approach aims to convert every page in a dashboard... crazy thing I'll post test results 🤞

[gbrian]

Promising!