21 Aug 2012 9:46 AM #1
showBy Triangle Becomes Rectangle on Android
The little triangle that showBy overlays use does not play nice with Android. The size is right, but it's just a black rectangle instead of a pointy indicator like I see in Chrome. Does anybody know a fix? At first I suspected it was a -webkit-mask issue, but the other ones work fine OOTB with ST126.96.36.199, so I'm not sure where to look.
23 Aug 2012 4:30 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
What Android version and is it on the native browser?
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services email@example.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
24 Aug 2012 8:30 AM #3
I'm on Android 4.0.3 with an HTC device. Native browser and PhoneGap 2.0 both show a properly-aligned rectangle. Mobile Chrome shows a misaligned triangle.
I'd like to see a properly-aligned triangle in all three scenarios, but I could use some help :o)
7 Sep 2012 6:26 AM #4
Update: The Sencha team has commented in the forums here that Android is losing support for webkit masks, which are used to put icons on buttons, fields, etc. They've also stated that a fix will be in the next release, but I wanted to share my work around anyway.
My DropdownMenu plugin uses showBy to display a context menu. Since the arrow mask was showing up as a rectangle, I decided to override/remove the mask and use the arrow as a background-image on the DIV instead. The base64-encoded image in the OOTB stylesheet is an off-white arrow with a transparent background. My floating Panel is styled with a white border instead of a black one, so the white triangle is a good match for my aesthetic.
Screenshot + Code: https://market.sencha.com/users/34/extensions/162
Note: If someone needs another color, they'd just need to create the image they want and update the base64 string in the CSS. Hopefully this helps somebody :o)