admin-on-rest：无法在宽列表视图上水平滚动

Question

当 Admin-on-rest 在 safari 移动设备（大概是所有小屏幕）上运行时，宽视图无法水平滚动。这是特别有问题的，因为在列表视图中，“编辑”链接通常位于行的右侧。

无法通过捏合缩放来露出页面缺失的部分。

这可以在演示网站上复制：https://marmelab.com/admin-on-rest-demo/#/

看起来罪魁祸首是使用

flex-direction: column

的 CSS 样式

删除此样式将恢复水平滚动。

这是一个错误（可能是跨浏览器问题？）还是出于我不知道的原因需要进行此限制？

可能的解决方案：删除表格容器上的

overflow-x: hidden

，这允许水平滚动结果的宽表，但保持整体页面宽度与页面大小相同，以便按钮/过滤器/等正确对齐。

Answer 1

不要在小屏幕上使用数据网格。请参阅有关此内容的文档：https://marmelab.com/admin-on-rest/Theming.html#responsive-utility

Answer 2

我正在使用这种方式在小尺寸设备中水平滚动：

export const ReservationList = (props) => (
    <div style={{
        display: "flex",
        flex: "1 1 auto",
        overflowY: "hidden",
        overflowX: "scroll"
    }}>
        <List {...props} title="Reservation List">
            <Datagrid>
              ...  
            </Datagrid>
        </List>
    </div>
);

Answer 3

如果你想在react-admin列表视图中添加水平滚动条。在数据网格周围添加一个 div。 maxWidth：“100vw”切断最后一个列，因此为 95。

...