如何将图标保持在正确的位置？ （场地和场地重新定位）

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
    });
});

ps 有很多类似标题的问题，但据我发现他们不必处理崩溃的字段集而只是使用绝对定位他们的css。

修改

使用它一段时间后的更多细节：在尝试将信息图标添加到字段的正文后，字段的输入与图标处于同一级别，但输入设置为上升100％的宽度。我不知道在哪里/如何改变这一点。

Answer 1

注入图标的绝对定位不是字段后信息图标的最佳解决方案。

更好的方法是在输入字段父项后添加一个。这将解决所有问题：输入会变得更短，为图标腾出空间，无需计算和设置图标的位置，现在没有可折叠字段集的问题。

我认为你需要这个插件：Form Field Icon Plugin