Opened 5 years ago

Closed 3 years ago

#17764 closed defect (patchwelcome)

dojox/mobile/TabBar: in some conditions the content is not correctly centered

Reported by: Adrian Vasiliu Owned by: Adrian Vasiliu
Priority: undecided Milestone: 1.13
Component: DojoX Mobile Version: 1.9.3
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by Adrian Vasiliu)

In some conditions, the layout of the content of dojox/mobile/TabBar is badly computed and it is not correctly centered. This happens if all these conditions are met:

  • The barType is segmentedControl or standardTab or slimTab or flatTab (but NOT the default type which is tabBar, for which no centering is done), and
  • The TabBar? is used as a fixed footer (not header) in a ScrollableView? (fixed: "bottom"), and
  • TabBar?'s "fill" property is not "always".

The issue hurts in Dojo 1.9.0+.

Raised in http://stackoverflow.com/questions/21787463/tabbar-fixedbottom-buttons-shift-right-slightly-after-transition-from-portrait.

How to reproduce: load the attached testTabBar.html in any browser (tested on Chrome and FF on desktop, and stock browser and Chrome on Android 4.x). The buttons of the TabBar? should be centered horizontally, they are not.

Attachments (1)

testTabBar.html (2.1 KB) - added by Adrian Vasiliu 5 years ago.
Test for reproducing the issue.

Download all attachments as: .zip

Change History (9)

comment:1 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)

comment:2 Changed 5 years ago by Adrian Vasiliu

This appears to be a side-effect of the fix of https://bugs.dojotoolkit.org/ticket/16789 in 1.9.0.

The layout of the TabBar? is done by its resize() method. This gets called twice: a first time by startup() of the TabBar? itself, and a second time by startup() of the (Scrollable)View which calls resize() on its children. At the first call of TabBar?.resize(), the size computation (involving dom-geometry.getMarginBox()) is correct and the content is correctly centered. But at the second call, the size is now different leading to a overestimated padding-left being set.

Adding the following piece of CSS works around the issue:

.mblTabBar {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

It might be good to add it to the TabBar? theme, assuming no side-effect will be found during testing.

Changed 5 years ago by Adrian Vasiliu

Attachment: testTabBar.html added

Test for reproducing the issue.

comment:3 Changed 5 years ago by Adrian Vasiliu

Owner: set to Adrian Vasiliu
Status: newassigned

comment:4 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)

comment:5 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)

comment:6 Changed 5 years ago by Adrian Vasiliu

I wrote:

It might be good to add it to the TabBar? theme, assuming no side-effect will be found during testing.

Unfortunately, found such a side-effect for the dojox/app sample mentioned in https://bugs.dojotoolkit.org/ticket/16789#comment:4 (holds for the current state of the master of the dojox and dojox/app repositories). So, for now, this is a workaround which can be used at application level after careful testing, but cannot be included in the themes without other changes that remain to be found.

Last edited 5 years ago by Adrian Vasiliu (previous) (diff)

comment:7 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)
Summary: dojox/mobile/TabBar: in some conditions the content is not corectly centereddojox/mobile/TabBar: in some conditions the content is not correctly centered

comment:8 Changed 3 years ago by dylan

Milestone: tbd1.12
Resolution: patchwelcome
Status: assignedclosed

Given that no one has shown interest in creating a patch in more than a year, I'm closing this as patchwelcome. Please let us know if you would like to get involved in helping make this change to Dojo!

Note: See TracTickets for help on using tickets.