[Solved] Button style inconsistent in most devices.

[Don]

According to the docs a Button can either be a <a data-role="button"> or a <button data-role="button">.  You would expect them to appear the same no matter which one you use.  However, on Android, Blackberry, and WP devices, they are styled differently.

For example in Android, <a>'s have bold text while <button>'s do not.  You can see this bug here:

http://trykendoui.telerik.com/@sweffect/iZAf

(Be sure to set the device from "Web" to "Android" before running it.)

[Petyo]

Hi Donald,

Thank you for contacting us. When it comes to buttons, each platform has its own default styling (background, borders, font-weight, and size. etc.) The styling provided by the Kendo UI Mobile skins does not try to override these, as some people my prefer it this way. If this is an issue in your project, than you should avoid using buttons and resort to A elements instead.

Regards,
Petyo
Telerik

 

 

[Don]

You said:
"When it comes to buttons, each platform has its own default styling (background, borders, font-weight, and size. etc.) The styling provided by the Kendo UI Mobile skins does not try to override these"

If that were true, however,  then a normal <button> should be styled the same as a <button data-role="button"> on each device, but that is not the case as shown in this example:  http://trykendoui.telerik.com/@sweffect/iZAf/2

In any case, I will follow your advice and change my <button>'s to <a>'s.  However, the styling behavior for  <button data-role="button"> still seems inconsistent.

[Kamen Bundev]

Hello Donald,

I went ahead and made the A and BUTTON elements a bit more alike when used as a Kendo Mobile Button. It is already live in Kendo UI Core and will be also included in the next internal build.

Let me know if this helps.

Regards,
Kamen Bundev
Telerik

 

 

[Don]

Thanks.  Though I've already changed my <button>'s to <a>'s as suggested by Petyo, making the button widgets style consistently should help avoid headaches in the future.