TIWIPhoneEdit and FocusColor

Hi,


I have a small problem with using the FocusColor property of the TIWIPhoneEdit control (tested with iPhone 5).

When a colour is selected for this property the text box changes shape. The original shape is still displayed but a new coloured box (the same colour as the focus colour) appears which is slightly taller and not quite as wide. It does not disappear when focus moves off the control so it is left looking a bit odd. It's a bit hard to explain in words. I can send you a screen shot if you like.

Thank you.

Hi,


I have not been able to reproduce this issue.
Can you please let me know which version of IntraWeb and iOS you are using?

DXE2

IW14.0.13
iPhone 4 and 5
iOS 6.1.3 and 6.1.4

Drop a TIWIPhoneEdit on the form and set its FocusColor to something (don't need anything else at all).

Run.

Delete button appears below the edit box.

Click in the box.

The focus rectangle is larger than the text box and covers over the bottom border.
Have you tried using a previous version of IW 14?
Please note that IW 14.0.13 is still marked as test release by Atozed and as such we are currently unable to offer support for this version as long as it has not been marked as the official release.

However, there have been changes in IW 14.0.13 to the default Doctype definition. You can try changing the Doctype to see if that helps:
http://www.atozed.com/IntraWeb/History/XIV/index.EN.aspx
  • Breaking change: If ServerController.DocType or IWForm.DocType are both not specified, IntraWeb will render using "<!DOCTYPE HTML>" (HTML 5). If you want the IW application to behave like HTML 4, you must specify the correct doc type for your application. You may have forms with different DocType as well. IWForm's DocType property has precedence over ServerController.DocType. 
    • Note: The recommended DocType value for HTML 4 is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Yes the problem existed with IW12, and also with IW14.0.12.

I have not been able to reproduce an issue with the TIWiPhoneEdit control. (see screenshot)
Can you please make sure you are using the latest version and there is no custom Doctype definition or custom CSS code active in your app?



I have no CSS or DocType. I tried setting the DocType to 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

as suggested. It made no difference.

I have a screenshot but I'm not sure how to easily upload it. The Insert Image button only lets me insert a URL not a path to a file.

Please note that uploading images via the forum is disabled.
If you don't have access to an external server to upload an image, you can email images as attachment to mailto:info@tmssoftware.com


Can you please also provide a ready to run sample project that demonstrates the issue so I can further investigate this?
If possible, you can also include the HTML source that is generated by IntraWeb in the browser which could enable me to determine if this is a rendering issue or a browser issue.
Hi Bart,

I can't find an easy way to get the source off the device itself, but I can run the app in Electric Mobile Studio and get the html that way. I've pasted it below. Note that in EMS the page renders correctly.

I will email you the project.

Thanks,
Tim


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <Title></Title> <META Name="GENERATOR" content="IntraWeb v14.0.13 Serial 201225075">

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/><META HTTP-EQUIV="MSThemeCompatible" Content="yes">

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<META HTTP-EQUIV="Expires" CONTENT="-1">

<script type="text/javascript">var IWDEBUG = false;</script>
<script type="text/javascript" src="/$/js/IWBase__EC97C48BE.js"></script>
<script type="text/javascript">

var TIWIPHONEEDIT1IWCL = null;
function TIWIPHONEEDIT1_onchange(event) {
OnControlContentChange(event);
return true;
}

function TIWIPHONEEDIT1_onkeypress(event) {
OnControlContentChange(event);
return true;
}

function TIWIPHONEEDIT1_onclick(event) {
OnControlContentChange(event);
return true;
}

function TIWIPHONEEDIT1_onselect(event) {
OnControlContentChange(event);
return true;
}

function TIWIPHONEEDIT1_onfocus(event) {
this.style.backgroundColor='#00FFFF'; return true;
}

function TIWIPHONEEDIT1_onblur(event) {
this.style.backgroundColor='#FFFFFF'; return true;
}

function Body_OnBlur(){GSubmitting = false;}
function FormDefaultSubmit()
{return false;}
var GOnResizetimeout=1000;

var GURLBase="/$/";
var GAppID="1fjxci30anrasc14tataa1pgrjax";
var GTrackID=2;

function IWTop(){return window;}
var GActiveControl = null;
history.go(1);

function Validate() {
return true;
}


function InitIWCLObjects() {
TIWIPHONEEDIT1IWCL = NewIWCL(IWCLForm,"TIWIPHONEEDIT1",false);
if (TIWIPHONEEDIT1IWCL) {
TIWIPHONEEDIT1IWCL.HookEvent("change",TIWIPHONEEDIT1_onchange);
TIWIPHONEEDIT1IWCL.HookEvent("keypress",TIWIPHONEEDIT1_onkeypress);
TIWIPHONEEDIT1IWCL.HookEvent("click",TIWIPHONEEDIT1_onclick);
TIWIPHONEEDIT1IWCL.HookEvent("select",TIWIPHONEEDIT1_onselect);
TIWIPHONEEDIT1IWCL.HookEvent("focus",TIWIPHONEEDIT1_onfocus);
TIWIPHONEEDIT1IWCL.HookEvent("blur",TIWIPHONEEDIT1_onblur);
}

}
function Initialize() {
GActivateLock = true;
InitRects(402, 458);
InitIWCLObjects();
if (TIWIPHONEEDIT1IWCL) {TIWIPHONEEDIT1IWCL.HookEvent("focus",TIWIPHONEEDIT1Focus);TIWIPHONEEDIT1IWCL.HookEvent("blur",TIWIPHONEEDIT1Blur);}TIWIPHONEEDIT1Render();TIWIPHONEEDIT1Keyup('TIWIPHONEEDIT1');

Body_OnResize();
window.onresize = Body_OnResize;
document.body.onblur = Body_OnBlur;
if ((document.body.leftMargin < 0) && (document.body.topMargin < 0)) {
document.body.leftMargin = 0;
document.body.topMargin = 0;
}
ReleaseLock();

}
</script>
<script type="text/javascript" src="/$/js/IWLib__EC97C48BE.js"></script>
<script type="text/javascript" src="/$/js/IWGecko__EC97C48BE.js"></script>




<style type="text/css">
.TIWIPHONEEDIT1CSS {position: absolute; left:79px; top:128px; z-index: 100;width:121px;height:21px;padding: 0;font-weight: normal; font-style: normal; text-decoration: none;font-size: 13px; background-color:#FFFFFF;text-align:left;}
</style></head>
<body style="margin: 0;" onload="Initialize()" onunload="ReleaseIWCL()">
<script type="text/javascript">createIWLocker("/$/gfx/loading.gif");ActivateLock();</script><script type="text/javascript">var PreScript=false; PostScript=false;var PreAsyncScript=false; PostAsyncScript=false;</script><form onsubmit="return FormDefaultSubmit();"><span style="outline:none;-moz-border-radius: 8px;border-radius: 8px;-webkit-border-radius: 8px;border: 1px solid #4C4C4C;padding-top: 0px;padding-bottom: 2px;padding-left: 2px;padding-right: 0px;text-align:left;" id="TIWIPHONEEDIT1DIV" class="TIWIPHONEEDIT1CSS" name="TIWIPHONEEDIT1" tabindex="1"><script type="text/javascript"><!--
function TIWIPHONEEDIT1Click(edt)
{
e = document.getElementById(edt);
text = e.value;
b = document.getElementById("TIWIPHONEEDIT1BtnCanvas");
e.value = "";
e.focus();
b.style.visibility = "hidden";
}
function TIWIPHONEEDIT1SetFocus()
{
document.getElementById("TIWIPHONEEDIT1").focus();
}
function TIWIPHONEEDIT1Focus()
{
c = document.getElementById("TIWIPHONEEDIT1DIV");
c.style.backgroundColor = "#00FFFF"
}
function TIWIPHONEEDIT1Blur()
{
c = document.getElementById("TIWIPHONEEDIT1DIV");
c.style.backgroundColor = "#FFFFFF"
}
function TIWIPHONEEDIT1Keyup(edt)
{
e = document.getElementById(edt);
b = document.getElementById("TIWIPHONEEDIT1BtnCanvas");
if (e.value == "")
b.style.visibility = "hidden";
else
b.style.visibility = "visible";
}
function TIWIPHONEEDIT1Render() {
var elem = document.getElementById("TIWIPHONEEDIT1BtnCanvas");
if (!elem || !elem.getContext) {
return;
}
c = elem.getContext("2d");
if (!c) {
return;
}
c.fillStyle = "#BABABA";
c.strokeStyle = "#BABABA";
c.lineWidth = 1;
c.beginPath();
c.arc(8,8,8,0,Math.PI*2,true);
c.closePath();
c.stroke();
c.fill();
c.fillStyle = "#FFFFFF";
c.strokeStyle = "#FFFFFF";
c.lineWidth = 2;
c.beginPath();
c.moveTo(4,4);
c.lineTo(12,12);
c.stroke();
c.beginPath();
c.moveTo(12,4);
c.lineTo(4,12);
c.stroke();
}
// --></script>
<input id="TIWIPHONEEDIT1" name="TIWIPHONEEDIT1" value="TIWIPhoneEdit1" tabindex="1" type="text" onfocus="TIWIPHONEEDIT1Focus()" onblur="TIWIPHONEEDIT1Blur()" onkeyup="TIWIPHONEEDIT1Keyup(this.id)" style="font:inherit;-webkit-appearance: caret;-moz-appearance: caret;border-style:hidden;width:101px;height:100%;background-color:transparent;outline:none;"><canvas onclick="return TIWIPHONEEDIT1Click('TIWIPHONEEDIT1')" id="TIWIPHONEEDIT1BtnCanvas" width="20px" height="20px" style="vertical-align:middle">Your browser does not have support for Canvas</canvas></span></form><form method="POST" name="SubmitForm" action="/$/">
<input type="HIDDEN" name="TIWIPHONEEDIT1">
<input type="HIDDEN" name="IW_Action">
<input type="HIDDEN" name="IW_ActionParam">
<input type="HIDDEN" name="IW_FormName" value="IWForm1">
<input type="HIDDEN" name="IW_FormClass" value="TIWForm1">
<input type="HIDDEN" name="IW_width">
<input type="HIDDEN" name="IW_height">
<input type="HIDDEN" name="IW_TrackID_" value="2"></form></body></html>

Hello,


Is there any feedback on this issue please?

Thanks,
Tim

As Bart answered several times, the problem could not be reproduced here.

Did you test a basic setup as Bart did and if so, was it working? If it was working, what's different in your app from a basic setup?

So it didn't happen with the project I sent you? What about when you ran the executable?I have run the executable on several different machines and the problem occurs on all of them (iPhone client only - EMS renders them OK).

This problem is solved. I turned off 

StyleRenderOptions.RenderSize

and it now works correctly.