Semantic-ui: Pull down icon in dropdown shift downward if text is larger than dropdown width.

[firozansari]

It disturb the whole aesthetic of the form. Please provide ellipsis with partial text instead in the dropdown.

http://imgur.com/WIjOPo8

[brigand]

@firozansari can you make a fiddle with the minimal code to reproduce? You can click here, put your code in, and then press Fork to get a new URL.

[firozansari]

@brigand Here is the code snippet to replicate the issue.

http://jsfiddle.net/S5NHw/

I am just trying to set width of the dropdown. Not sure if I am doing something wrong.

[Unprofound]

@firozansari Your best bet is to use whatever size you need to make your text fit. Unless your text could be a dynamic length. If so, then you should just not give it a size.

Here is a fiddle that with a simple over ride can fix the dropdown icon at the size you provided but you can still run into this issue if you start getting smaller. http://jsfiddle.net/hENrP/1/

Correct me if I am wrong guys, but adding ellipsis support or partial text would require some javascript, certainly possible just requires a bit more love to the element.

[jlukic]

@firozansari @studiothree10

1) Specify no width - Will automatically resize to whatever size the text is, no need to do anything - http://jsfiddle.net/WhcLh/2/
2) Specify width manually but wide enough for largest content - http://jsfiddle.net/WhcLh/1/

[brigand]

@firozansari to add to @jlukic's options:

1. use a smaller font size for the dropdown; which will allow it to fit
2. set white-space to nowrap, which prevents the icon/text from wrapping around to the next line
3. reduce padding on the dropdown

Side note: Semantic is defined in EM, not PX; so if the global font-size of the page changed; a pixel based form would fall apart. You may consider using a grid based form, or using percents.

[firozansari]

@jlukic @brigand
I still believe that providing ellipsis for dropdown is best solution to address item with very large text.

Using smaller font size will again create disharmony with rest of the controls in the form.
Reducing padding will solve the problem at some extent but again I have rely on item text for not jeopardizing the form layout.

Best implementation I have seen is on peopleperhour site to address this issue.

Url: http://www.peopleperhour.com/hourlie/new?trffc=topnav_sub_seller
Goto form "Earn extra money - offer optional add-on services to the Buyer"

Try extending the text of dropdown on above link through FireBug.

Check this screenshot:
http://imgur.com/mHHKzlE

[firozansari]

I achieved the ellipsis for large text using text-overflow.

Here is my modified CSS if someone interested.

.ui.dropdown > .text {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease 0s;
    white-space: nowrap;
    width: 100px;
}

http://jsfiddle.net/hENrP/2/