Append ellipsis when text in a TextField is not completely displayed, Vaadin 8 & 10

Question

When a TextField cannot display all the text of its contents, I would like an ellipsis (… HORIZONTAL ELLIPSIS) to appear as the last character displayed to indicate to the user that some of the field contents is not visible. Actually, any kind of indicator would be acceptable, ellipsis or otherwise.

➛ Is there such a feature in Vaadin 8 (Framework) or 10 (Flow)?

➛ Is there some workaround or modification I can make to do this? Some CSS trick?

score 2 · Answer 1 · answered Jul 17 '18 at 16:15

I'm not using v10 but I assume a similar approach as the one below based on v8 should get you the same effect. One thing to note is that, like a ton of other stuff, it depends on the browser you're using, and for IE & Edge (link1 pointing to link2) you need to make the input read-only to have it work, hence the focus/blur listeners in my sample. If you'd like, you can further style the input to make it look like a regular one if disabled, but that's not the main point here.

Code

import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

public class MyEllipsisTextFieldComponent extends VerticalLayout {
    public MyEllipsisTextFieldComponent() {
        TextField ellipsisTextField = new TextField("Ellipsis", "This is a text field with a custom style that uses ellipsis to display very long and uninteresting texts like this one");
        ellipsisTextField.addStyleName("ellipsis");
        ellipsisTextField.addFocusListener(event -> ellipsisTextField.setReadOnly(false));
        ellipsisTextField.addBlurListener(event -> ellipsisTextField.setReadOnly(true));
        ellipsisTextField.setReadOnly(true);
        addComponent(ellipsisTextField);

        addComponent(new TextField("No ellipsis", "This is a regular text field with a very long and uninteresting text that does not use ellipsis"));
    }
}

Theme

.v-textfield-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
}

Result

Append ellipsis when text in a TextField is not completely displayed, Vaadin 8 & 10

1 Answers1