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.

TextInput placeholder text needs ellipsis for long text

See original GitHub issue

The placeholder text does not get truncated when it overflows the input. It should overflow with ellipsis and have a tooltip the user can use to see the full text.

What package(s) are you using?

carbon-components
[x ] carbon-components-react

Detailed description

Describe in detail the issue you’re having.

In some languages, the placeholder text we are using overflows the TextInput, and there is no ellipsis to clue the user of a run-off. Nor can the user hover and view the full text.

Is this issue related to a specific component?

TextInput

What browser are you working in?

Chrome

What version of the Carbon Design System are you using? Carbon react 7.9.0

Steps to reproduce the issue

https://codesandbox.io/s/epic-herschel-s4ef8

Additional information

Issue Analytics

State:
Created 4 years ago
Comments:11 (11 by maintainers)

Top GitHub Comments

2reactions

laurenmricecommented, Mar 13, 2020

0reactions

tw15egancommented, Mar 13, 2020

Trying to think of a solution for the original issue:

Ellipse the placeholder when it gets too long, provide placeholder tooltip when hovered over
DO NOT ellipse the placeholder, but provide placeholder tooltip when hovered over

Which would you prefer?

Top Results From Across the Web

HTML Input placeholder text-overflow: ellipsis does not work ...

This works at first, but when I click the input element before I type anything, the placeholder is still showing but not the...

Text Ellipsis (Input Placeholders) - CodePen

1. input(type="text", placeholder="This is a super long placeholder and will be cutoff most likely!") · 2. input(class="ellipsis", type="text", placeholder="This ...

text-overflow - CSS: Cascading Style Sheets - MDN Web Docs

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…

Truncating Text using Chakra UI - DEV Community ‍ ‍

There are 2 ways to truncate Text in Chakra UI: ... Lorem ipsum is a placeholder text commonly used to demonstrate the visual...

React Native Text Overflow - Apicella Gomme

React Native Text OverflowOverflow occurs when the input is too large to. ... It concerns me that you need to set a transparent...