1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default showBy Triangle Becomes Rectangle on Android

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What Android version and is it on the native browser?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    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 services@sencha.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.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      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
    Bunchofstring will become famous soon enough

      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)

Thread Participants: 1

Tags for this Thread