WebButtons on Ipad

Hi all,

I read a similar topic in this forum but the thread was a couple years ago, just wondering if this is solved or not.

The first picture is from the app running on Desktop or Android Pad (mine is LG), all WebButtons look the way they were designed. The second picture is running on my Ipad2, all WebButtons look differently. Is there a way to solve this without change the WebButtons to WebLabels?

Use a webStyle to set corners, color, and text color.

Thanks, I’ll have it a try. But not only the shape, the colors are different also

You can set all that in a WebStyle.

I know, I think I have set the style already, otherwise there won’t be any color there. My problem is the appearance of the buttons with webstyle assigned are different when appears on iPad.

https://documentation.xojo.com/index.php/WebButton

I guess you are using Safari on your iPad.

@Alberto De Poo yes, it was an output from safari, but I tried with chrome produces the same result. Is it caused by some settings on iPad?

I don’t know, I’m just starting with web apps.

From the docs it looks like you need to define several things with the Style to try to make your buttons square. Or maybe is a “feature” on the iPad.

Under iOS, all browsers use the Safari rendition engine anyway. Chrome is just Safari in disguise.

OK. The webstyle indeed does not make square corners on iPad.

You may want to file a bug report.

But from what I see on Mac, it looks like Safari has it’s own style of buttons on Mac, and I suspect the same occurs on iPad.

Time to use webLabels… Note that it is valid for Android as well, where buttons don’t style very well. I had to use weblabels in my own demo of RubberViewsWE to be able to style.

Just found this in an old post:

"Make sure the style you’re using for the button has a gradient background, even if both colours are the same to get a flat look, this will force the button to be drawn as you want it rather than take on defaults from the browser (including Mobile Safari).

When you do this the borders and corners you’ve set will also be honoured."

[quote=376094:@Tony Lam]Just found this in an old post:

"Make sure the style you’re using for the button has a gradient background, even if both colours are the same to get a flat look, this will force the button to be drawn as you want it rather than take on defaults from the browser (including Mobile Safari).

When you do this the borders and corners you’ve set will also be honoured."[/quote]
That looks like very insightful and accurate advice from a no doubt very handsome, intelligent and modest individual. :wink:

@Ian Jones Yes indeed. Sorry that I have forgotten to mention your credit.

Hmmm. I remember clearly Greg giving me the same advice once :wink:

Haha, no worries Tony. The thing is, I was following this conversation because I had recently noticed that an app I’m working on has those horrid lozenge shaped with gradient buttons on iPad, and was confused because the button style was definitely squared off and flat coloured everywhere else. Your quote of the fix I found a long time ago was a great reminder of what was needed, I’d forgotten to use a gradient background with the same colour for both values!