1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    10
    Vote Rating
    0
    philip142au is on a distinguished road

      0  

    Default Infamous Firefox cursor bug - Info and possible workarounds

    Infamous Firefox cursor bug - Info and possible workarounds


    Hi,

    I have a firefox browser and a IE browser, I have INPUT tag on form on a BasicDialog, but in firefox the cursor doesn't Flash when I click on the input box why?

    Please help!

    Thanks, Philip

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    I believe this is a FF bug, at least according to Jack. Not sure if there is a solution to it or not.
    Last edited by brian.moeskau; 28 Sep 2007 at 2:44 PM. Reason: removed old yui-ext link

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    4
    Vote Rating
    0
    soso is on a distinguished road

      0  

    Default


    Did anyone found a solution to this bug?

    Thanks

  4. #4
    Ext User schmidetzki's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    110
    Vote Rating
    0
    schmidetzki is on a distinguished road

      0  

    Default


    It-s definitiv a FF bug.
    The only solution I found is to position the dialog content "fixed".
    Something like this:
    Code:
    <div>
        <div class="x-dlg-hd ydlg-hd">no title</div>
        <div class="x-dlg-bd ydlg-bd">
    	    <div style="position:fixed">
    	       ... dialaog content
    	    </div>
        </div>
    </div>
    Wolfgang Schmidetzki

  5. #5
    Sencha User amitava's Avatar
    Join Date
    Mar 2007
    Posts
    29
    Vote Rating
    0
    amitava is on a distinguished road

      0  

    Default


    I had also faced the similar problem working with yui-ext .33. After some investigating I somehow found that this only happens if shim:true, otherwise its fine. So here is my workaround tested in both FF 1.5 and 2. Not quite sure whether it is the right process.

    Code:
    function show_pm_msg(dlg, hwnd) {
    	/* to fix firefox cursor issue */
    	var useShim;
    	var ua = navigator.userAgent.toLowerCase();
    	if (ua.indexOf("msie") > -1){
    		useShim = true;
    	}else{
    		useShim = false;
    	}
    	
    	if(!pm_msg_dlg){ // lazy initialize the dialog and only create it once
    		pm_msg_dlg = new YAHOO.ext.BasicDialog(dlg, {
    			autoTabs:true,
    			autoScroll: true,
    			resizable: true,
    			width:500,
    			height:350,
    			shadow:true,
    			minWidth:300,
    			minHeight:250,
    			shim:useShim, //only for ie
    			fixedcenter:true,
    			proxyDrag: true
    		});
    		pm_msg_dlg.addKeyListener(27, pm_msg_dlg.hide, pm_msg_dlg);
    		pm_msg_dlg.addButton('Close', pm_msg_dlg.hide, pm_msg_dlg);
    		pm_btn = pm_msg_dlg.addButton('Submit', reply_to_pm, pm_msg_dlg);
    	}		
    	pm_msg_dlg.show(hwnd);	
    }

  6. #6
    Ext User nhausig's Avatar
    Join Date
    Mar 2007
    Location
    Hamburg, Germany
    Posts
    6
    Vote Rating
    0
    nhausig is on a distinguished road

      0  

    Default


    Using shim:false only helps in some situations. This bug is a firefox issue and many years old (see https://bugzilla.mozilla.org/show_bug.cgi?id=167801). I've tried many workarounds to no avail. Now there's a solution (see Comment #84). It is somehow ugly. You need a wrapper div around your text input with overflow set to auto and display to none. Then you set display to block after a short delay.

    Code:
    var inputWrapperDiv = ...;
    
    if (YAHOO.ext.util.Browser.isGecko) {
      inputWrapperDiv.style.display   = 'none';
      inputWrapperDiv.style.overflow  = 'auto';
      setTimeout(function() {inputWrapperDiv.style.display = 'block';}, 10);
    }
    If setting overflow to auto is resulting in scrollbars (resizing elements in wrapper div), you have to give the wrapper div some extra padding.

  7. #7
    Sencha User amitava's Avatar
    Join Date
    Mar 2007
    Posts
    29
    Vote Rating
    0
    amitava is on a distinguished road

      0  

    Default


    Quote Originally Posted by nhausig
    Using shim:false only helps in some situations. This bug is a firefox issue and many years old (see https://bugzilla.mozilla.org/show_bug.cgi?id=167801). I've tried many workarounds to no avail. Now there's a solution (see Comment #84). It is somehow ugly. You need a wrapper div around your text input with overflow set to auto and display to none. Then you set display to block after a short delay.

    Code:
    var inputWrapperDiv = ...;
    
    if (YAHOO.ext.util.Browser.isGecko) {
      inputWrapperDiv.style.display   = 'none';
      inputWrapperDiv.style.overflow  = 'auto';
      setTimeout(function() {inputWrapperDiv.style.display = 'block';}, 10);
    }
    If setting overflow to auto is resulting in scrollbars (resizing elements in wrapper div), you have to give the wrapper div some extra padding.
    Thanks nhausig for sharing your experience.

    BTW, would you please explain a little bit about those other situations where using shim:false doesn't help? Thanks again.

    Amitava

  8. #8
    Ext User nhausig's Avatar
    Join Date
    Mar 2007
    Location
    Hamburg, Germany
    Posts
    6
    Vote Rating
    0
    nhausig is on a distinguished road

      0  

    Default


    Quote Originally Posted by amitava
    BTW, would you please explain a little bit about those other situations where using shim:false doesn't help? Thanks again.
    Amitava
    It won't help if there's another cause on the page, not just the shim iframe. The ff bug is about text input overlapping scrollable elements in general. It occurs when you have a text input overlapping a div that has overflow set to auto. There are other fixes than the js-delay-block solution but most of them have unwanted sideeffects and you cannot apply them in general. I stepped into this problem, because usually my apps have a document content area that is housed in a div with auto-overflow, because I want auto-scollbars for the document. Therefore all my modal dialogs with text-entry showed this problem.

    Some interesting testcases from the mozilla bug site:

    https://bugzilla.mozilla.org/attachment.cgi?id=98624
    https://bugzilla.mozilla.org/attachment.cgi?id=245770
    https://bugzilla.mozilla.org/attachment.cgi?id=187105

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    68
    Vote Rating
    0
    Jonathan Feinberg is on a distinguished road

      0  

    Default


    Here's a workaround that works for me, and gives you a nice, fat, blinking cursor in the text area:

    Code:
    Ext.MessageBox.getDialog().on("show", function(d) {
    	var div = Ext.get(d.el);
    	div.setStyle("overflow", "auto");
    	var text = div.select(".ext-mb-textarea", true);
    	if (!text.item(0))
    		text = div.select(".ext-mb-text", true);
    	if (text.item(0))
    		text.item(0).dom.select();
    });

  10. #10
    Ext User hunkybill's Avatar
    Join Date
    Mar 2007
    Location
    Montreal
    Posts
    67
    Vote Rating
    0
    hunkybill is on a distinguished road

      0  

    Default


    @Jonathan Feinberg:

    Nice. Worked fine for me, but was not really 'fat'!! Nice to finally see a cursor in the middle of a border layout dialog box again. That's the first thing people have bitched to me about, the dang missing cursors in form fields. Nested border layout + dialogs with forms is pretty much a standard necessary pattern for any decent application, and the fact that most INPUT elements over West, Center, or East regions are cursor-less due to CSS sucks big time. Funny how I thought after reading the Bugzilla reports - the solution was to enclose my INPUT elements in a container with overflow:auto. Oops.. me bad.

Similar Threads

  1. "FireFox2 kills cursor" and text-select in toolbar
    By brian in forum Ext 1.x: Bugs
    Replies: 8
    Last Post: 7 Jun 2007, 12:12 AM
  2. TextEditor input type text
    By alex1er in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 28 Jan 2007, 7:59 AM
  3. BasicDialog problem with Firefox
    By chris in forum Ext 1.x: Bugs
    Replies: 4
    Last Post: 18 Nov 2006, 12:21 PM
  4. Style attribute of text input field for ygrid-page-number
    By maurits in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 2 Oct 2006, 12:51 AM

Thread Participants: 20