[CLOSED] TextAreafield with an div overlay in front

  1. #1

    [CLOSED] TextAreafield with an div overlay in front

    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
    Last edited by Daniil; May 09, 2014 at 1:32 PM. Reason: [CLOSED]
  2. #2
    Hi @Akpenob,

    No idea. Could you, please, provide a full test case?
  3. #3
    Quote Originally Posted by Daniil View Post
    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>
  4. #4
    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
  5. #5
    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.
  6. #6
    Quote Originally Posted by Daniil View Post
    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

Similar Threads

  1. [OPEN] [#273] Ext.Net Front Page
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 11, 2013, 5:34 AM
  2. Replies: 4
    Last Post: Jun 10, 2013, 5:54 AM
  3. Replies: 1
    Last Post: Feb 07, 2013, 9:49 AM
  4. Window overlay entire Portal page
    By JsonTerre in forum 1.x Help
    Replies: 1
    Last Post: Mar 28, 2011, 11:47 AM
  5. NumberField is front of a CalendarExtender
    By Moreno in forum 1.x Help
    Replies: 5
    Last Post: Dec 02, 2008, 7:34 PM

Tags for this Thread

Posting Permissions