Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Terra-menu text truncated & line height
See original GitHub issueIssue Description
Terra-menu has a couple visual defects:
-
Setting
contentWidth="auto"truncates text, as shown in the attached screenshot.
-
Blue_steel’s menu options were much taller than terra-menu. We’re concerned users may accidentally tap an incorrect option due to small menu heights. Is this best left to the consumer, or should this be addressed within Terra? See attached screenshot with fixed
160width.
| Before | After |
|---|---|
 |
 |
- Size for menu items on mobile is too small of a touch target and should look to make larger:
Issue Type
- New Feature
- Enhancement
- Bug
- Other
Expected Behavior
- contentWidth “auto” should flex based on text content and resize horizontally to support i18n’d text
- Menu options should have increased line height
Current Behavior
N/A - see description
Steps to Reproduce
N/A
Environment
- Component Version: terra-menu 1.10.0
- Browser Name and Version: All; Chrome 63.0.3239.84 (Official Build) (64-bit)
- Operating System and version (desktop or mobile): All; macOS 10.12.6 (16G1036)
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
how to calculate line height for text truncate? - Stack Overflow
I'm using text truncate by height currently like this const lineHeight = 90. that's the initial height for calculation with scroll height.
Read more >Multi-Line Truncation with Pure CSS
Imagine an element has a line-height of 1.4rem and you want to make sure it only shows a maximum of three lines of...
Read more >How to truncate long text and show read more / less button
If the text is longer than 4 lines, it will be truncated and will have ending of “…”. If the text is shorter...
Read more >truncationMode(_:) | Apple Developer Documentation
A view that truncates text at different points in a line depending on the mode you select. Parameters. mode. The truncation mode that...
Read more >How to check if Text is truncated in SwiftUI? - FIVE STARS
When displaying text of various lengths, our design needs to be clear on whether there should be a maximum number of displayable lines,...
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
Talked with @neilpfeiffer, it sounds like he’s reached out to you @noahbenham about a path forward on this you can implement in your app.
@noahbenham that’s what I was hoping - I’ll get details ready for you to start on for next week.