标签栏固定：底部。从纵向过渡到横向后，按钮会稍微向右移动

Posted 2023-02-16

【中文标题】标签栏固定：底部。从纵向过渡到横向后，按钮会稍微向右移动

【英文标题】：Tabbar fixed:bottom. Buttons shift right slightly after transition from portrait to landscape

【发布时间】：2014-02-14 19:01:33

【问题描述】：

Worklight 6.1 Dojo 1.9

创建了一个 ScrollableView，其中标签栏固定：顶部有两个按钮，标签栏固定：底部有三个按钮。当应用程序启动标签栏时，顶部和底部的按钮都正确居中。

android 模拟器和 Nexus 7 设备的测试场景：

1) 在纵向模式下，应用程序初始化，主视图显示两个标签栏 按钮正确居中。

2) 将设备旋转到横向模式，两个标签栏都正确转换。

3) 旋转回纵向模式，并且标签栏固定：顶部转换正确，但标签栏 固定：底部按钮略微向右移动。重复纵向 -> 横向 第二次转换会导致额外的右移。第二次换班后 底部标签栏保持固定在该位置。

  The tab bar fixed to the top behaves correctly during all mode transitions.  

感谢您提供的任何建议。

【问题讨论】：

在浏览器中加载 html 而不是将其打包为 cordova 应用程序时，您是否会重现该问题？

这是我测试的代码的链接：pastie.org/8751331

在Workight中用common和Android构建应用程序。使用 Chrome 的 Android 模拟器，标签栏按钮在从纵向到横向的过渡中保持在正确的位置。接下来，我开始通过活动从我的页面中剥离代码，以找出我的问题可能是什么。我已将其隔离为:: 看来 barType:'segmentedControl'导致示例代码中的底部标签栏向右移动，但顶部标签栏保持正确定位。感谢您对行为提出的任何建议。

上一条评论空间有限。在您的示例代码中添加了 barType:'segmentedControl'，并使用 Chrome 在 Android 模拟器中重新创建了 tabbar shift。

好的，我也转载了。正在调查...

【参考方案1】：

在我的测试（包括在 Android 上）中添加以下 CSS 片段：

<style type="text/css">
.mblTabBar 
    box-sizing: border-box;

</style>

为了以后避免这种变通方法的需要，我注册了https://bugs.dojotoolkit.org/ticket/17764。