1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

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

    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:
    FF.png
    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:
    chrome1.png

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

    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.


    chrome3.png

    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:

    Code:
    show : function (datePicker)
                {
                    var content = Ext.get('Content');
                          h = content.getHeight(),
                            w = content.getWidth(),
                            tar = Ext.get('pos'+target.id),
                            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)
                        {
                            datePicker.getEl().setY(tarPosTop);
                        }
                        if (tarPosLeft + dpWidth > w)
                        {
                            datePicker.getEl().setX((tarPosLeft - dpWidth));
                        }
                        else
                        {
                            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
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

Thread Participants: 1

Tags for this Thread