Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Fix Dropdown text overflow issue #558

Closed
RahimKanjiyani opened this Issue Dec 27, 2012 · 8 comments

Comments

Projects
None yet
4 participants

Apply "text-overflow: ellipsis" to dropdowns like image list

Could you give specific example of when this occurs? Also what other types of list have this issue?

Member

tneil commented Jan 20, 2013

I believe they are referring to the items in the dropdown not truncating.. instead they should truncate and show the ellipsis at the end. This is partially caused when you have text for an option that is wider than the control. This causes problems on selection. The control grows to the option text instead of the option text truncating with an ellipsis.

That's right. Thank you. 

Sent from Samsung Mobile

-------- Original message --------
From: Tim Neil notifications@github.com
Date:
To: "blackberry/bbUI.js" bbUI.js@noreply.github.com
Cc: RahimKanjiyani rahimkanjiyani@hotmail.com
Subject: Re: [bbUI.js] Fix Dropdown text overflow issue (#558)

I believe they are referring to the items in the dropdown not truncating.. instead they should truncate and show the ellipsis at the end. This is partially caused when you have text for an option that is wider than the control. This causes problems on selection. The control grows to the option text instead of the option text truncating with an ellipsis.


Reply to this email directly or view it on GitHub.

@tneil tneil pushed a commit that referenced this issue Jan 29, 2013

Tim Neil Merge pull request #626 from williekwok/fixfordrop
Issue #558 - Fix to use overflow ellipsis for text overflow in image lists
1ba1d8b

@tneil tneil closed this Jan 29, 2013

Will this fix dropdown issue as well? I noticed that the fix modifies image list specific css. Thanks.

.bb-bb10-image-list-item-1280x768-1280x720 .description
{
color:#606060;
overflow: hidden;
white-space:nowrap;
font-size: 26pt;

margin-bottom: 0px;
margin-top:-1px;
text-overflow: ellipsis;
}

Where would we put in the overflow ? I'm trying to look through the css file but not sure which one to change.

Here are screenshots to what i'm working on..

IMG_00000034
IMG_00000035
IMG_00000036
IMG_00000037

Member

tneil commented Feb 12, 2013

I'm having a hard time determining from our images which exact issue you're coming across. Is it different than the original issue description?

Hi Tim,
In my project, i'm dynamically creating the dropdown menus.

When the user selects an item from the dropdown, if the text length is greater than the control, it will overflow and look pushed down to the bottom.

ultimately i ended up truncating the length of the options while i am creating the dropdown menu before it's added to the container..

IMG_00000039

@tneil tneil reopened this Feb 12, 2013

Member

tneil commented Feb 12, 2013

I've reopened the issue for investigation

@tneil tneil closed this Jul 17, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment