WebButton Web Styles on Android

Does anyone one know why or how to fix web buttons on Android to use the assigned style?

In the image below, look at the Login Button. Above is Safari and below is from a Nexus 7 Android tablet using Chrome. On Mac, Google Chrome, it looks correct.

I’m using this style:

If you right click the pics in a new window they open…

Interestingly, the WebButtons are also not styled in FireFox on Android either…

They work on iPad using Safari.

Seems odd that the styles would break on Android only.

Hal, You might try using WebLabel as a button. In the style, darken its pressed state, use rounded border. Instead of Action, implement MouseDown. They work consistently and can better coordinate with your UI.

GREAT idea. Thank you Brad!

That works perfectly Brad!

I like picture buttons, so I use a WebImageView, with a “picture button style”. I can do a pretty good approximation of a button, with the appearance of depressing it. The events used are the same as suggested by Brad. Basically, it is the same solution, but with a picture.

Some other examples of custom controls are described in the blog post I did, Simulating iOS Controls in web apps.

After, I tried Brad’s suggestion I end up going bck to WebButtons and using the default style.

Brad’s idea visually worked great, but tapping on the button on a Droid (Nexus 7) ended up selecting the button on the first tap and then performing the mouse down on the second tap.

Basically, I had to change my design to fit within the Xojo button styling limits. :frowning:

Right. You’ve run into the Chrome label issue. where it takes Chrome time to decide whether your touch event should be a click. I fix this with some JavaScript in WELabel in Studio Stable Web Essentials. There’s also a Feedback report about it.

<https://xojo.com/issue/23681>

P.S. The labels as buttons work great in mobile Firefox.

WebLabels make good buttons, however there is a bug <https://xojo.com/issue/22201> that allows them still to accept user events even when enabled=False. Hopefully we may see a fix for this before too long.