如何將圖標保持在正確的位置？ （場的右邊和場地的位置）

Question

一般來說，我試圖讓一個圖標停留在場的右邊。我需要它在Firefox，Chrome瀏覽器IE11與IE8

JS小提琴工作：http://jsfiddle.net/e8f6N/3/

有可展開或摺疊一個字段。當字段集更改時，它下面的字段向上或向下移動以補償移動。發生這種情況時，Firefox是獨一無二的，因爲圖標不會隨着字段的主體一起移動。

我發現，如果我用相對定位而非絕對，圖標將與現場像它應該移動。然而，有一些白色空間放在每個字段下面，這是我不想要的。

建議表示讚賞存在如下問題：

1. 爲Firefox與現場的其他移動圖標的方法嗎？
2. 一種使用相對定位的方法，而不是在字段下面插入額外的空間 ？
3. 或者，更好的方式來剝皮這隻貓？在撥弄使用

代碼：

Ext.onReady(function() { 
    Ext.QuickTips.init(); 

    var fieldSet = Ext.create('Ext.form.FieldSet', { 
     title: 'Simple Collapsible Fieldset', 
     collapsible: true, 
     items: [{ 
      xtype: 'label', 
      text: 'Watch the icon and collapse this fieldset' 
     }] 
    }); 

    var textBoxWithInfoIcon = Ext.create('Ext.form.field.Text', { 
     fieldLabel: 'Example', 
     listeners: { 
      afterrender: function (me) { 
       var icon = me.getEl().down('.x-form-item-body').createChild({ 
        cls: 'x-form-info-icon', 
        tag: 'img', 
        src: 'broken', 
        width: 16, 
        height: 18, 
         'data-qtip': 'an example textfield to simulate this icon which does not move', 
         'data-qtitle': 'Field Information' 
       }); 
       var xPosition = 130; 
       var yPosition = 0; 
       icon.alignTo(me.getEl(), 'tl-tr', [xPosition, yPosition]); 
      } 
     } 
    }); 

    var textBox = Ext.create('Ext.form.field.Text', { 
     fieldLabel: 'Example' 
    }); 

    var textBoxWithInfoIcon2 = Ext.create('Ext.form.field.Text', { 
     fieldLabel: 'Example', 
     listeners: { 
      afterrender: function (me) { 
       var icon = me.getEl().down('.x-form-item-body').createChild({ 
        cls: 'x-form-info-icon', 
        tag: 'img', 
        src: 'broken', 
        width: 16, 
        height: 18, 
         'data-qtip': 'an example textfield to simulate this icon which does not move', 
         'data-qtitle': 'Field Information' 
       }); 
       var xPosition = 130; 
       var yPosition = 0; 
       icon.alignTo(me.getEl(), 'tl-tr', [xPosition, yPosition]); 
      } 
     } 
    }); 

    var panel = Ext.create('Ext.panel.Panel', { 
     title: 'Title', 
     frame: true, 
     width: 400, 
     height: 200, 
     items: [fieldSet, textBoxWithInfoIcon, textBox, textBoxWithInfoIcon2], 
     renderTo: document.body 
    }); 
}); 

附：有很多類似標題的問題，但據我發現，他們不必處理collapsing fieldset，只需在他們的css中使用絕對定位。

編輯

更多細節用它工作了一段時間後：嘗試一個信息圖標添加到現場的屍體後，該領域的投入是在同一水平的圖標，但輸入被設置爲佔據寬度的100％。我不知道我在哪裏/如何改變這一點。

Answer 1

注入圖標的絕對定位不是字段後面信息圖標的最佳解決方案。

更好的辦法是在輸入字段父項之後添加一個。這將解決所有問題：輸入會變得更短，爲圖標騰出空間，無需計算和設置圖標的位置，截至目前沒有可摺疊字段集的問題。

我想你需要這個插件：Form Field Icon Plugin