Altinn / Altinn/app-frontend-react

Input Field Shifts Position When Help Icon Is Added

Open
#2,430 0 comments 0 reactions 0 assignees View on GitHub
kind/bug
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

When a question mark help icon is added to an input field, the entire input box is shifted down by a few pixels. This creates a misalignment, which becomes particularly noticeable when two input fields are placed horizontally next to each other—one with a help icon and one without.

Expected Behavior: The input field should remain in the same vertical position whether a help icon is present or not. The addition of help text should not impact the alignment of the input field.

Actual Behavior: The input field with the help icon is moved down slightly, causing a visual inconsistency

![image](https://github.com/user-attachments/assets/41a7ced0-3d4e-4d3e-86ee-841c6142976b)

### Steps To Reproduce

Place two input fields side by side.
Add a question mark help icon to one of the fields.
Observe the misalignment between the two fields.

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with two input fields placed side by side, adding a question-mark help icon to only one. Inspect the frontend input and help-icon rendering and styling, then verify that both fields keep the same vertical position with and without help text.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.