In my current project, I am facing a challenge where I need to implement an icon that stays to the right of a field. This requires compatibility with Firefox, Chrome, IE11, and even IE8.
To see a demo of this issue, you can check out my JS Fiddle: http://jsfiddle.net/e8f6N/3/
The main problem arises when dealing with a collapsible fieldset. In Firefox specifically, the icons do not move along with the rest of the field's body when the fieldset expands or collapses.
After experimenting with different positioning techniques, I discovered that using relative positioning instead of absolute allows the icon to move correctly with the field. However, this approach introduces unwanted white space below each field.
I could use some guidance on the following issues:
- Is there a way to make Firefox move the icon in sync with the field?
- How can I utilize relative positioning without adding extra space below the fields?
- Alternatively, is there a better method to handle this situation?
Here is a snippet of the code used in the fiddle:
[Code snippet would go here]p.s. Interestingly, similar questions have been asked before, but most of them don't involve collapsing fieldsets and rely solely on absolute positioning in CSS.
EDIT
Additional details emerged while further investigating this issue: When attempting to add an info icon next to a field, both the icon and the input field are at the same level horizontally. However, the input field is set to occupy 100% of the width, posing a new challenge in terms of styling adjustments.