I have a Phonegap application for Windows Phone 8 that uses web pages inside. I make a button inside a <div>
element with data-role="footer"
option inside that div. Also button is an <a>
element with data-role="button"
option inside it.
The button is not rendered always well, there appears some corner issues on it, the corner is not rounded but it is a 90 degrees white ancle instead of blue nice rounded corner.
Is there any known issues on Windows Phone 8 that it does not support some HTML5 features and / or jQuery features?
Edit 1:
Sources (essential parts):
TestButton.java:
public class TestButton extends Widget {
private static TestButtonUiBinder uiBinder = GWT.create(TestButtonUiBinder.class);
interface TestButtonUiBinder extends UiBinder<AnchorElement, TestButton> {}
AnchorElement mAnchor;
public TestButton() {
mAnchor = uiBinder.createAndBindUi(this);
setElement(mAnchor);
mAnchor.setAttribute("data-role", "button");
}
}
..and TestViewImpl.java:
@UiField
TestButton mBackButton;
@Override
public TestButton getBackButton() {
return mBackButton;
}
.. and TestViewImpl.ui.xml:
<b:TestButton ui:field="mBackButton" dataIcon="arrow-l"
title="{mI18n.back}" toolbarRight="true" />
Edit 2:
Border-radius bug on <a> in IE9 points that similar issues may arise due to the not mature nature of css3 when some combinations of css3 tags do not work well together.
Now, my button renders at Firefox as follows:
<a style="font-weight: bold;" data-role="button" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-hover-b ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-check ui-icon-shadow"> </span></span></a>
Unless anyone suggests any workaround, the current investigations of mine show the result is that this is a bug in the jQuery itself and the workaround should be found outside jQuery or fixing the jQuery itself.
Source: Please have a look at jQuery demo page, e.g. http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-themes.html and observe e.g. Swatch "a"
from the demo page with a wp8 device. You'll observe the weird corners. I tested Lumia 920.
Solution: Wait for 1.4 and hope the best, or manually combine 1.2 and 1.3 and pick best parts of both.
Edited solution: Yes, 1.4.0 is there, and the problem seems to be solved :) They changed the entire look and feel, so the problem went away.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With