Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Feb 2009
    Posts
    14
    Vote Rating
    0
    markeza is on a distinguished road

      0  

    Default [FIXED-347]DatePicker popup width incorrect in Webkit

    [FIXED-347]DatePicker popup width incorrect in Webkit


    Try editing field "created" on

    http://www.extjs.com/deploy/dev/examples/grid/property-grid.html.

    In my test, window with DatePicker and "autoWidth: true" stretches horizontally to 100% only on Google Chrome.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,645
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Is it Chrome 4? Because it might be a bug in Chrome 4.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Feb 2009
    Posts
    14
    Vote Rating
    0
    markeza is on a distinguished road

      0  

    Default Chrome 4

    Chrome 4


    Quote Originally Posted by evant View Post
    Is it Chrome 4? Because it might be a bug in Chrome 4.
    Yes, it is. I just tried with Chrome 3 and it seems ok.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,080
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Confirmed on Google Chrome 4.0.221.8 under Ubuntu.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cambridge UK
    Posts
    112
    Vote Rating
    0
    hat27533 is on a distinguished road

      0  

    Default Thanks guys

    Thanks guys


    Thought I was going mad, being trying to track this down for ages, I am experiencing a similar problem.

    Not convinced it is all chrome though.....(although IE7 and FF are OK).

    My DatePicker is in a Panel with layout of form with a container Window with 'card' layout. Changing the layout makes no difference.

    The window is shown from a toolbar button in a ViewPort.

    Very strangely though, the extjs.com DatePicker examples work fine in Chrome (4.0.224.16).

    This is the DatePicker form code

    Code:
    new Ext.Panel({       
            layout:'form',
            height:80,
            width:320,
            border:false,
            items:[new Ext.form.TimeField({
                fieldLabel:'Run at',
                minValue: '0:00',
                maxValue: '23:45',
                increment: 15,
                width:50,
                forceSelection:true,
                format:'H:i',
                value:'01:00'
            }) ,
            new Ext.form.DateField({
                //id:'startDate',
                fieldLabel:'On',
                value:new Date(),
                format:'d-M-Y',
                width:85
            }),
            new Ext.form.DateField({
                fieldLabel:'Until',
                //id:'endDate',
                width:85,
                value:new Date().add(Date.DAY,28),
                format:'d-M-Y'
            })
            ]
        });
    Any pointers would be appreciated.

    The example in the link in markeza's post also produces the problem.

    OS is Windows XP

    Neil

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,645
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    What do you mean you're not convinced it's only chrome? Are you saying it's happening on other browsers, or only Chrome 4?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cambridge UK
    Posts
    112
    Vote Rating
    0
    hat27533 is on a distinguished road

      0  

    Default Chrome 4

    Chrome 4


    Hi, it just seems strange that some examples seem to be fine in Chrome 4 and others do not.

    This works http://www.extjs.com/deploy/dev/exam...dv-vtypes.html

    Try editing field "created" on http://www.extjs.com/deploy/dev/exam...erty-grid.html it doesn't work.

    Why should it have different behaviour in the same browser?

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cambridge UK
    Posts
    112
    Vote Rating
    0
    hat27533 is on a distinguished road

      0  

    Default CSS

    CSS


    If you look at the generated CSS with the developer tools in Chrome you can remidy the problem by setting the correct width.

    Is there a work around for this so that we can enter the correct width for the popup part of the data picker ?

  9. #9
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cambridge UK
    Posts
    112
    Vote Rating
    0
    hat27533 is on a distinguished road

      0  

    Default


    Guys, sorry to spam you....

    if you override the DatePicker css with a width value it works.

    Code:
    .x-date-picker {
        border: 1px solid;
        border-top:0 none;
    	position:relative;
            width: 185px;
    }
    It messes up IE7 and FF but hey must be in the right area. I am no CSS expert, is there a way of detecting the browser and only apply if Chrome ?

  10. #10
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cambridge UK
    Posts
    112
    Vote Rating
    0
    hat27533 is on a distinguished road

      0  

    Default A fix?

    A fix?


    To get round this I did this :-

    Code:
     if(Ext.isChrome===true){       
            var chromeDatePickerCSS = ".x-date-picker {border-color: #1b376c;background-color:#fff;position: relative;width: 185px;}";
            Ext.util.CSS.createStyleSheet(chromeDatePickerCSS,'chromeDatePickerStyle');
        }
    Works fine now.