Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: [FIXED-347]DatePicker popup width incorrect in Webkit

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default [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 Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250

    Default

    Is it Chrome 4? Because it might be a bug in Chrome 4.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default 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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Confirmed on Google Chrome 4.0.221.8 under Ubuntu.
    Aaron Conran
    @aconran

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cambridge UK
    Posts
    112

    Default 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 Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250

    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?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cambridge UK
    Posts
    112

    Default 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

    Default 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

    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

    Default 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.

Page 1 of 2 12 LastLast

Posting Permissions

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