GitHub user CoderSxy added a comment to the discussion: Adaptive layout on
mobile devices for Superset Dashboard
try this
` @media screen and (max-width: 700px) {
.grid-container {
margin-left: 10px !important;
margin-right: 10px !important;
}
.grid-row {
flex-wrap: wrap;
.dragdroppable-column {
width: 100%;
margin-right: 0 !important;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.resizable-container {
width: 100% !important;
max-width: 100% !important;
}
}
}
}`
And also need to be in the
src/dashboard/components/gridComponents/ChartHolder TSX added a judgment
`if (isFullSize) {
chartWidth = window.innerWidth - CHART_MARGIN;
chartHeight = window.innerHeight - CHART_MARGIN;
} else if (
window.innerWidth < 700 &&
document.querySelector('.slice_container')?.clientWidth > 100
) {
chartWidth = document.querySelector('.slice_container')?.clientWidth;
chartHeight = Math.floor(
component.meta.height * GRID_BASE_UNIT - CHART_MARGIN,
);
} else {`
GitHub link:
https://github.com/apache/superset/discussions/20734#discussioncomment-14662652
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
