Tab bar icons cut off on right side

[jweber]

REQUIRED INFORMATION


Ext version tested:

• Sencha Touch 2.1.1

Browser versions tested against:

• Chrome for Mac 25.0.1364.172

DOCTYPE tested against:

• html

Description:

• In a bottom tab bar, the right edge of the icons is cut off.

Steps to reproduce the problem:

• Load the example URL, and look at the "Settings" icon.

The result that was expected:

• Icon is fully visible

The result that occurs instead:

• The right edge of the top gear is cut off (compare it to the left side of the gear).

Test Case:

N/A



HELPFUL INFORMATION


Screenshot or Video:

• icon.png

See this URL for live test case: http://docs.sencha.com/touch/2-1/tou...bs2/index.html


Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Mac OS 10.8.3

[mitchellsimoens]

Have you looked at the 2.2 build? The icons have changed but the element is 30x30 still but they don't seem to be cut off.

[jweber]

It's hard to tell, since the built-in icons in 2.2 are actually characters in the Pictos font, rather than CSS inline images.

My problem is actually not with the built-in icons, but with custom icons. I'm not sure how to generate these in 2.2. In 2.1, I would do something like this, to mimic Sencha's styles for built-in icons:

.x-tab .x-button-icon.my_custom_icon_class,
.x-button .x-button-icon.x-icon-mask.my_custom_icon_class {
	-webkit-mask-image: inline_image("my_custom_icon.png");
}

Is there a standard way to generate custom icons in 2.2, or am I on my own?