Results 1 to 4 of 4

Thread: showBy Triangle Becomes Rectangle on Android

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
      0  

    Default 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 ST2.0.1.1, so I'm not sure where to look.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    What Android version and is it on the native browser?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
      0  

    Default

    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)

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
      0  

    Default

    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)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •