PDA

View Full Version : [CLOSED] TextAreafield with an div overlay in front



Akpenob
May 08, 2014, 12:38 PM
Hello support :-)

I have a problem, with the textareafield.

If i make a div and put in front of the textareafield like a overlay the caret seems to disappear.
but this is only in firefox, chrome.

In IE i can clearly see the caret blinking and where it is in the field.

Do you guys have any idea why this is so...

The div i have made is click trough, so i can click into the textarea and put the caret inside it
and it works in chrome, firefox and IE..

So the my question is why cant i see the caret, when i can type into the field and see the text appear...

The code for making the div in front of the textareafield is like so..





LIA.TextArea._comp // this is component that holds the Ext.form.field.TextArea

var owner = LIA.TextArea._comp;

//Config for the div
var htmlConfig = {
id: LIA.TextArea._comp.id + "_divHtml",
autoEl: "div",
renderTo: owner.bodyEl,
overflowY: 'auto',
style: {
position: 'absolute',
'pointer-events': 'none',
top: "0px",
left: "0px",
"white-space": "pre-wrap;",
"word-wrap":"break-word",
"border": "1px solid black;",
paddingTop: "4px",
paddingRight: "6px",
paddingLeft: "35px"
}
}
LIA.TextArea._htmlOverlay = Ext.create('Ext.container.Container', htmlConfig); // this generates the div

Daniil
May 08, 2014, 2:20 PM
Hi @Akpenob,

No idea. Could you, please, provide a full test case?

Akpenob
May 08, 2014, 3:02 PM
Hi @Akpenob,

No idea. Could you, please, provide a full test case?

Hey danill

Here is the test page


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="LIA.APP.WEB.LinkItAll.LiaLogin.Test"
ValidateRequest="false" Async="true" EnableViewState="false" ViewStateMode="Disabled" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script type="text/javascript">
var Test = {};
Test._ta = undefined;
Test._overlay = undefined;
function Addoverlay(item) {
Test._ta = item;
var owner = Test._ta;
var htmlConfig = {
id: Test._ta.id + "_divHtml",
autoEl: "div",
renderTo: owner.bodyEl,
overflowY: 'auto',
style: {
position: 'absolute',
'pointer-events': 'none',
top: "0px",
left: "0px",
"white-space": "pre-wrap;",
"word-wrap": "break-word",
"border": "1px solid black;",
paddingTop: "4px",
paddingRight: "6px",
paddingLeft: "3px"
}
}
Test._overlay = Ext.create('Ext.container.Container', htmlConfig);
Test._ta.inputEl.setStyle("color", "transparent"); // this makes the caret disappear in chrome and firefox
}
function Resize (item) {

var width = item.getWidth();
var height = item.getHeight();

Test._overlay.setWidth(width);
Test._overlay.setHeight(height);
}
</script>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ViewStateMode="Disabled"
EnableViewState="false" />
<div>
<ext:Window ID="wndTest" runat="server" Width="640" Height="480" Layout="FitLayout" Modal="true">
<Items>
<ext:Panel ID="pnlTest" runat="server" Layout="FitLayout">
<Items>
<ext:TextArea ID="txtTest" runat="server">
<Listeners>
<AfterRender Handler="Addoverlay(item)">
</AfterRender>
<Resize Handler="Resize(item)">
</Resize>
</Listeners>
</ext:TextArea>
</Items>
</ext:Panel>
</Items>
</ext:Window>
</div>
</form>
</body>
</html>

Akpenob
May 08, 2014, 3:03 PM
I did find out that setting the color to transparent makes the caret vanish
But the reason why i do not know.
Any idea why.... :-)

Best regards
Akpenob

Daniil
May 08, 2014, 4:21 PM
Well, it looks like FireFox and Chrome applies "color: transparent;" on the caret, but IE doesn't. I guess it is unlikely there is a way to overcome it.

Akpenob
May 09, 2014, 6:40 AM
Well, it looks like FireFox and Chrome applies "color: transparent;" on the caret, but IE doesn't. I guess it is unlikely there is a way to overcome it.

Yes i thought that as well

My guess is that since they both are using geko the rule apply both :-)

Thanks for the quick support and keep up the good work

You can close this one :-)

Best Regards
Akpenob