Results 1 to 3 of 3

Thread: Form Element Rendering Issues

  1. #1

    Question Form Element Rendering Issues

    Has anyone seen form element rendering issues like the attached before?

    The red circle shows the triggerfield button misaligned (down by 1 pixel) in IE only.
    The blue circle shows a button where the text is cropped on the right (IE only, okay after a refresh).

    The pink circles show the left edge of buttons being split from the main part by 1 pixel.

    Three of the four buttons have strange blue lines underneath them.
    These are all as follows: (top row with no icon and no icon-txt cls)

    PHP Code:
    var btnWinInvoiceItems = new Ext.Button({
        
    id'btn-open-win-invoice-items',
        
    applyTo'btn-win-open',
        
    text'Select Invoice Items',
        
    icon'images/icons/application_split.png',
        
    cls"x-btn-text-icon",
        
    disabledtrue,
        
    handler: function() {
            
    winInvoiceItems.show();
        }
    }); 
    HTML:
    Code:
    <table>...<td class="x-form-element"><span id="btn-win-open"></span></td>
    Attached Images Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    St. Helens, England
    Posts
    30

    Default

    For some reason on first load in IE7 all buttons with icons & text have the text forced off the right side of the button. Once a refresh is performed this problem always disappears. Does anyone have any idea what might be causing this, I'm assuming it's not an ext bug because I'm sure it would have been picked up already.

  3. #3
    Ext User
    Join Date
    Apr 2008
    Location
    Germany
    Posts
    71

    Default

    Quote Originally Posted by SSJSparky View Post
    For some reason on first load in IE7 all buttons with icons & text have the text forced off the right side of the button. Once a refresh is performed this problem always disappears. Does anyone have any idea what might be causing this, I'm assuming it's not an ext bug because I'm sure it would have been picked up already.
    IE has several rendering issues, especially with float:right (gouillotine bug is one of the celebrities in this area).
    It depends if the page loads in quirks or standard mode.
    Sometimes you see elements to appear when hovering over another.
    Mostly you can workaround by applying absolute values for height and width.
    The bugs themselves are on the IE side. But IMHO it would be also a bug in ExtJS if it did not fully implement the known workarounds to be really platform independend.

Posting Permissions

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