Skip to content

Commit

Permalink
fix(Textfield): Disable word-wrapping inside prefix and suffix (#2177)
Browse files Browse the repository at this point in the history
## Description
We encountered an
[issue](Altinn/altinn-studio#13167) in Altinn
Studio when we added prefix and suffix to the Textfield component. When
a text inside a prefix/suffix contains a hyphen, a line break is created
and the container overflows vertically.

The issue can be solved by adding `white-space: nowrap` to the prefix
and suffix classes.

## Screenshots
This is from testing in local Storybook.

**Before**:

![prefix-before](https://github.com/user-attachments/assets/06f7e613-9552-4e94-b28f-78520193f11d)


**After**:

![prefix-after](https://github.com/user-attachments/assets/f96aec9f-71e7-4df5-9ee1-24fbfe00c4d2)
  • Loading branch information
ErlingHauan authored Jul 22, 2024
1 parent 5a84ce1 commit 85df76c
Showing 1 changed file with 2 additions and 0 deletions.
2 changes: 2 additions & 0 deletions packages/css/textfield.css
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,14 @@
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
white-space: nowrap;
}

.ds-textfield__suffix {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
white-space: nowrap;
}

.ds-textfield__readonly__icon {
Expand Down

0 comments on commit 85df76c

Please sign in to comment.