Results 1 to 2 of 2

Thread: DatePicker not positioning correctly in Chrome and showing a white mask.

  1. #1
    Sencha User
    Join Date
    Oct 2009
    Vote Rating

    Default DatePicker not positioning correctly in Chrome and showing a white mask.

    I have a DatePicker (new Ext.DatePicker) in a form (html, not ExtJS) and when showing the component (I have attached a function to the show event) I move it in the screen to fit the correct position. This seems to work in IE, FF and Safari but not in Chrome (using latest version, 20.something), this is very weird because when I try to inspect the element with the inspector it automatically moves it to the correct position.

    So check the images, with FF happens this:
    Which is correct.

    Then with Chrome it shows it under the date field, making my screen bigger, ok, no problem as far as it is visible:

    The problem is that when I hover the DatePicker gets white:

    And if I click in the developer tools it moves to the correct position and removes the white thing, this is extremely weird and annoying, I cannot really debug what's going on or why is doing that.


    Do someone knows where is this white thing coming from or why the DatePicker is not positioning correctly?

    This is the code I use to position it:

    show : function (datePicker)
                    var content = Ext.get('Content');
                          h = content.getHeight(),
                            w = content.getWidth(),
                            tar = Ext.get('pos',
                            tarPosTop = tar.getTop(),
                            tarPosLeft = tar.getLeft(),
                            dpEl = datePicker.getEl(),
                            dpWidth = dpEl.getWidth(),
                            dpHeight = dpEl.getHeight();
                        if (tarPosTop + dpHeight > h)
                            datePicker.getEl().setY((h - dpHeight));
                        else if (Ext.isChrome)
                        if (tarPosLeft + dpWidth > w)
                            datePicker.getEl().setX((tarPosLeft - dpWidth));
                            datePicker.getEl().setX(tarPosLeft + 30);
    You can already see that there is some tricking for Chrome. This code works correct for IE, FF and Safari, and AFAIK this was working in the past also with Chrome but somehow it's stopped working.
    I have tried things like setStyle instead of setX and setY and also focus() just in case was a strange issue with focusing but result is the same. I think that the main problem is in the positioning, once it is in the correct position it does not show this white mask, so if there is any way of forcing the element to pick some position might help.

    Any help would be much appreciated.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Houston, Tx
    Vote Rating


    Are you using 3.4? Please provide a small working example that we can use to verify. It seems you are making adjustments.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts