Opened 6 years ago

Last modified 3 years ago

#17044 open enhancement

Ellipsed text in TextBoxes

Reported by: Samuel Ondrek Owned by:
Priority: undecided Milestone: 1.15
Component: Dijit - Form Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

Hello guys,

We should use ellipsis effect for all TextBoxes?,
when selected item text is longer then inner input.

Bug Sample: http://jsfiddle.net/ondrek/3FjLJ/8/
Fix Sample: http://jsfiddle.net/ondrek/3FjLJ/9/

In Bug Sample user don't know that value is longer, because it doesn't look broken.
But in Fix Sample user can see ellipsis effect, so he knows that text is longer.

This CSS rule is applied for TextBox?, ValidationTextBox?, NumberTextBox?, NumberSpinner?, ComboBox?, FilteringSelect?, Select, DateTextBox?, YearTextBox?, YearMonthTextBox?, MonthTextBox?, DayTextBox? and more and more.

.dijitTextBox .dijitInputInner { 
	white-space: nowrap; 
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis; 
	overflow: hidden;
}

It's nice enhancement for UX. I can prepare some more testcases if you need.

Change History (4)

comment:1 Changed 6 years ago by Douglas Hays

Owner: Douglas Hays deleted
Status: newassigned

comment:2 Changed 6 years ago by Douglas Hays

Status: assignedopen

comment:3 Changed 4 years ago by dylan

Milestone: tbd1.12

Probably worth considering given that it's an easy CSS change. Risk is potentially breaking CSS on older IE versions.

comment:4 Changed 3 years ago by dylan

Milestone: 1.131.15

Ticket planning... move current 1.13 tickets out to 1.15 to make it easier to move tickets into the 1.13 milestone.

Note: See TracTickets for help on using tickets.