Results 1 to 5 of 5

Thread: [2.0.2][OPEN] IE: Missing bottom border on TriggerFields

  1. #1
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46
    Vote Rating
    0
      0  

    Exclamation [2.0.2][OPEN] IE: Missing bottom border on TriggerFields

    Using EXT 2.0.2.

    When using TriggerFields, or their DateField/ComboBox subclasses, the bottom border of the field disappears under Internet Explorer 6, but not Firefox 2. This doesn't appear to be a problem when using a regular EXT TextField without a trigger.

    This makes it difficult for some users to see that they are in a field.

    I should mention that I don't see this when using ext-1.1.1.

    HTML Code:
    <html>
    	<head>
    		<title>TriggerFields</title>
    		<link rel="stylesheet" type="text/css" href="ext-2.0.2/resources/css/ext-all.css" />
    		<script src="ext-2.0.2/adapter/ext/ext-base.js" type="text/javascript"></script>
    		<script src="ext-2.0.2/ext-all.js" type="text/javascript"></script>
    		<script type="text/javascript">
    			Ext.BLANK_IMAGE_URL = "ext-2.0.2/resources/images/default/s.gif";
    		</script>
    	</head>
    	<body style="margin:10px;">
    
    <form>
    	<div>Text: <input id="textField"/></div>
    	<div>Date: <input id="dateField"/></div>
    	<div>Combo: <input id="comboField"/></div>
    </form>
    
    <script type="text/javascript">
    	new Ext.form.TextField({applyTo:"textField"});
    	new Ext.form.DateField({applyTo:"dateField"});
    	new Ext.form.ComboBox({applyTo:"comboField"});
    </script>
    
    	</body>
    </html>
    Attached Images Attached Images
    Last edited by ziesemer; 6 Mar 2008 at 9:52 AM. Reason: Noting that I didn't see this in ext-1.1.1.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    1
      0  

    Default

    I'm not sure why this is happening in your example but not in the normal Ext example pages. There must be some CSS difference somewhere that I'm not seeing. We'll take a look into it.

  3. #3
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46
    Vote Rating
    0
      0  

    Default

    Surprisingly, it seems that it all has to do with the font!

    When removing the reference to examples.css from the reference, I could reproduce the issue from the combos.html examples page.

    After some futher testing, I found that the "font-family:verdana,tahoma,helvetica;" applied to body in examples.css is what is making the difference.

    On my previous example, if I apply style="font-family:verdana,tahoma,helvetica;" to one of the div tags surrounding either the "Date" or "Combo" examples, that example is fixed.

    You must be doing some calculations to determine size/positioning dependent upon font metrics somewhere that is affecting this?

  4. #4
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46
    Vote Rating
    0
      0  

    Default

    For anyone looking for a "global", simple fix, without modifying the body tag, applying this seems to work well:

    .x-form-field-wrap{font-family:verdana,tahoma,helvetica;}

    If the Ext CSS styles are going to contain hard-coded font and family names all over the place, I guess the above should be included as well.

    (I also think more of the "sizes" should be relative (percent, etc.) instead of fixed, otherwise it becomes an accessibility issue - preventing the View / Text Size options from working within the browser.)

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default Missing Top and Bottom Borders in IE8

    Similarly, we are missing top and bottom borders after migrating to IE8.

    Has anyone encountered this?

Posting Permissions

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