Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    62
    Vote Rating
    3
    pbartels is on a distinguished road

      0  

    Default [CLOSED] Rendering problem in IE8

    [CLOSED] Rendering problem in IE8


    Another user also noticed this bug:
    http://www.extjs.com/forum/showthrea...ight=ie8+field

    Testcode:
    Code:
     Ext.onReady(function() {
            Ext.BLANK_IMAGE_URL = 'Client/resources/images/default/s.gif';
    
            this.generic = new Ext.form.ComboBox({
                displayField: 'Name',
                width: 150,
                emptyText: 'Select'
            });
    
    
            this.quantity = new Ext.form.TextField({
                name: 'quantity',
                value: 0,
                width: 70
            });
            
            var viewport = new Ext.Viewport({
                layout: 'form',
                border: true,
                items: [this.quantity, this.generic]
            });
            
        });
    The border below is not shown.

    This css is the possible cause:
    Code:
    .ext-ie7 .x-form-text {
      margin:-1px 0px
    }
    Thanks!

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    What version of Ext are you using?

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    62
    Vote Rating
    3
    pbartels is on a distinguished road

      0  

    Default


    Sorry I forgot to include the version.

    I use the latest 3.2.1

  4. #4
    Ext User
    Join Date
    Aug 2009
    Posts
    1
    Vote Rating
    0
    knowly is on a distinguished road

      0  

    Default


    try this...

    .x-form-text, .ext-ie .x-form-text, .ext-ie .x-form-file {
    height:22px;
    line-height:20px;
    margin: 0px 0px;
    vertical-align:middle;
    }

  5. #5
    Sencha User jayrobinson's Avatar
    Join Date
    Jan 2010
    Location
    Palo Alto, California
    Posts
    194
    Vote Rating
    0
    jayrobinson has a spectacular aura about jayrobinson has a spectacular aura about

      0  

    Default


    It seems this problem only occurs in IE8 Compatibility Mode, which we do not support.

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Posts
    11
    Vote Rating
    0
    stashx is on a distinguished road

      0  

    Default Form elements rendering problem with IE8 and HTA

    Form elements rendering problem with IE8 and HTA


    Working with ExtJS 3.3.1 and testing the issue with different versions of IE, I found out that the problem is not exactly the IE7 but the rendaring engine . IE8 uses Trident version 4 and for some weird reason when it's on IE7 mode, it doesn't like the -1px margin (same problem when you have Compatibility Mode). I understand that you don't want to support Compatibility Mode but how about HTAs? With IE8 HTA renders as IE7 with Trident/4 and raises this bug.. Using IE9 HTA still renders as IE7 but with Trident/5 that has no problems.

    I have attached my testing HTA and my results on deferent IE installs (you can see the browser reported info).

    Using the "forced compatibility mode" trick , does solve the border issue but the triggers at the combo box are misplaced. To check it add this meta tag in my hta
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    You can "fix" it by adding the following css but it *might* break the display on real ie7 browsers...
    Code:
    <!--[if IE 7]>
            <style type="text/css">
                .ext-ie .x-form-text, .ext-ie .x-form-file {
                    margin: 0px 0px;
                }
            </style>
            <![endif]-->
    It would be really nice if you could find a way to solve this problem. My guess is that we shall check Trident's version too in combination with IE's...

    Cheers,
    StashX


    PS: I'm sorry for digging a closed thread... If a moderator wants to move my post on a separate thread, please do so...


    {EDIT}
    PS2: Here's a way to check ie versions:
    Code:
    /*
     * Author: Rob Reid
     * CreateDate: 20-Mar-09
     * Description: Little helper function to return details about IE 8 and its various compatibility settings either use as it is
     * or incorporate into a browser object. Remember browser sniffing is not the best way to detect user-settings as spoofing is
     * very common so use with caution.
    */
    function IEVersion(){
    	var _n=navigator,_w=window,_d=document;
    	var version="NA";
    	var na=_n.userAgent;
    	var ieDocMode="NA";
    	var ie8BrowserMode="NA";
    	// Look for msie and make sure its not opera in disguise
    	if(/msie/i.test(na) && (!_w.opera)){
    		// also check for spoofers by checking known IE objects
    		if(_w.attachEvent && _w.ActiveXObject){		
    			// Get version displayed in UA although if its IE 8 running in 7 or compat mode it will appear as 7
    			version = (na.match( /.+ie\s([\d.]+)/i ) || [])[1];
    			// Its IE 8 pretending to be IE 7 or in compat mode		
    			if(parseInt(version)==7){				
    				// documentMode is only supported in IE 8 so we know if its here its really IE 8
    				if(_d.documentMode){
    					version = 8; //reset? change if you need to
    					// IE in Compat mode will mention Trident in the useragent
    					if(/trident\/\d/i.test(na)){
    						ie8BrowserMode = "Compat Mode";
    					// if it doesn't then its running in IE 7 mode
    					}else{
    						ie8BrowserMode = "IE 7 Mode";
    					}
    				}
    			}else if(parseInt(version)==8){
    				// IE 8 will always have documentMode available
    				if(_d.documentMode){ ie8BrowserMode = "IE 8 Mode";}
    			}
    			// If we are in IE 8 (any mode) or previous versions of IE we check for the documentMode or compatMode for pre 8 versions			
    			ieDocMode = (_d.documentMode) ? _d.documentMode : (_d.compatMode && _d.compatMode=="CSS1Compat") ? 7 : 5;//default to quirks mode IE5				   			
    		}
    	}
    				 
    	return {
    		"UserAgent" : na,
    		"Version" : version,
    		"BrowserMode" : ie8BrowserMode,
    		"DocMode": ieDocMode
    	}			
    }
    Attached Images
    Attached Files

  7. #7
    Sencha User
    Join Date
    Sep 2009
    Posts
    44
    Vote Rating
    0
    grubi is on a distinguished road

      0  

    Default


    Sorry for posting to a closed thread but I'm running into exactly the same problem that combos and testboxes are rendered wrong with HTA apps on ie8.

    Does anyboy find a workaround meanwhile to address this issue?

    Thanks a lot.

    grubi.

Similar Threads

  1. [CLOSED] SimpleComboBox rendering problem in GXT 2.1
    By cutout33 in forum Ext GWT: Bugs (2.x)
    Replies: 3
    Last Post: 25 May 2010, 7:25 AM
  2. Replies: 10
    Last Post: 18 Oct 2009, 9:05 AM
  3. ExtJS 3.0 TextField rendering problem in IE8
    By tBSTAR in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 31 Aug 2009, 10:11 AM
  4. [2.0][CLOSED] TreeNode rendering problem in Firefox
    By erchan_2000 in forum Ext 2.x: Bugs
    Replies: 3
    Last Post: 5 Jan 2008, 2:11 PM

Thread Participants: 5