[Link with icon] Web components: icon position when text wraps to 2 lines
See original GitHub issueCurrently link with icon is not showing the correct behavior when link text wraps to 2 lines. Icon snaps to right-aligned to the container, and creates a weird gap between text and icon. This could happen when text is too long, or when screen size is narrow, and is influencing several dependent components such as Link list
, Link list section
, and Content group banner
This is similar problem to (#5740 )
Current
Proposed design & spec
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Place icon after two lines line with text-overflow ellipsis without ...
I removed the white space value and added a font size of 1em. Then I set a max height of 2em that will...
Read more >Align SVG Icons to Text and Say Goodbye to Font Icons
The icons align to your text easily and can be modified by changing the font-size of the element. There is no clearly defined...
Read more >Material Symbols and Icons - Google Fonts
Introducing Material Symbols. Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of...
Read more >Handling Long and Unexpected Content in CSS
There is an icon on the right side to emphasize that it is clickable. However, when the area is not big enough, the...
Read more >Rich Text Component - Appian 21.2
The help icon does not show when the label position is "COLLAPSED" . Accessibility Text ... Determines if wrapping to multiple lines will...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey @emyarod yep that is the expected behavior. Unfortunately there are awkward moments (when 1 arrow breaks to line 2 before the other one).
I think if there’s possibility to have an “orphan” logic so the arrows is always gonna be attached to 1 word with it, it could be nice. Lemme know if that’s even possible. If so, I can add a feature request for the team to look at.
Bug must also be fixed in React. Issue (#6837 ) has been created to manage that work.