Chosen: Multi-select placeholder text is cut off

[trinzia]

The placeholder in multiple select is cut off (last letter). Change the font to something wide like Verdana.

The width of this element is controlled by JS:
chosen-container-multi .chosen-choices li.search-field input[type="text"]

Need to add an extra EM on the width of the input to show entire placeholder.

[tjschuck]

What browser, browser version, OS, and OS version are you using? And what version of Chosen?

Can you link to a publicly accessible page (or better, a Fiddle) that shows the issue so we can attempt to reproduce?

[pfiller]

Closing until further info provided.

[trinzia]

Issue is in Chrome and Firefox, but not in IE9. A Fiddle isn't going to help with font issues, because you could be on Mac or have a different font displayed, depending on your OS etc. It's not really a CSS or script issue.

My font stack is:
font-family: Corbel, Optima, 'Myriad Pro', Calibri, 'Gill Sans', sans-serif;

From this stack, my computer is displaying Corbel, but it is likely that Verdana, Open Sans, or any other wide character font will have the same issue.

The specific item is:
.chosen-container-multi .chosen-choices li.search-field input[type="text"]

This input is having a width assigned from the JS, and that width is not sufficiently wide for the placeholder, so that 'Choose US States' becomes 'Choose US State'.

[trinzia]

PS - Here's my stylesheet. I do not expect you to fix my CSS, but I do think your JS width value is off a wee bit, that's all.

.chosen-container {
  position: relative;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size:15px;
  line-height: 26px;  
}
.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}
.chosen-container a {
  cursor: pointer;
}


.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px; padding:5px 15px;
  border: 1px solid #aaa;
  border-radius: 1px;
  background-color: #fff;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
}
.chosen-single span { display:block; }
.chosen-container-single .chosen-default {
  color: #999;
}
.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url('chosen-sprite.png') -42px 1px no-repeat;
  font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
  position: absolute; top: 0; right: 0;
  display: block;
  width: 36px; height: 100%;
  background:#f8f8f8; border-left:1px solid #aaa;
}

.chosen-single b:after { 
  content:"";
  display: inline-block;                     
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  position:absolute; top:50%; right:12px; margin-top:-3px;
}
.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 0px 4px 4px 4px;
  white-space: nowrap;
}

.chosen-container-single .chosen-search input {margin: 1px 0; width: 100%; line-height: normal; }
.chosen-container-single .chosen-search input:focus { border-color:#aaa; }
.chosen-container-single .chosen-search:after {
    content:""; position:absolute; top:8px; right:8px; width:16px; height:16px; 
    background: transparent url(../../images/master.svg) no-repeat -120px 0px;
}    

.select2-search:after {
    content:""; position:absolute; top:8px; right:8px; width:16px; height:16px; 
    background: transparent url(../../images/master.svg) no-repeat -120px 0px;
}  

.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-radius: 0 0 1px 1px;
  background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  left: -9999px;
}

.chosen-container .chosen-results {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 3px 15px;
  list-style: none;
  -webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}
.chosen-container .chosen-results li.highlighted {
  background-color: #d2e8f0;
}
.chosen-container .chosen-results li.no-results {
  display: list-item;
  background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}
.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}
.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  border: 1px solid #aaa;
  background-color: #fff;
  cursor: text;
}
.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 5px 0px;
  white-space: nowrap; 
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: 1px 0; padding: 3px 15px;
  outline: 0; border: 0 !important; background: transparent !important; box-shadow: none; filter:none; border-radius: 0;
}
.chosen-container-multi .chosen-choices li.search-field .default {
  color: #999;
}
.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 4px 0 4px 5px;
  padding: 2px 22px 2px 6px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background-color: #f2f2f2;
  color: #333;
  cursor: default;
  line-height:22px;
}
.search-choice {position:relative;}
.search-choice-close {
  position: absolute;
  top: 7px; right: 4px;
  display: block;
  width: 12px;
  height: 12px;
}
.search-choice-close:after {
  content:"\00D7"; 
  font-family: Verdana, sans-serif !important; font-weight:bold; font-size:12px; line-height:12px;
  color:#000; filter: alpha(opacity=25); opacity: .25;  
  display:block; 
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}

.chosen-container-active .chosen-single {
  border: 1px solid #0b83b7;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #aaa;
  border-radius: 1px 1px 0 0;
  background-color:#f8f8f8;
  box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
  border: 1px solid #0b83b7;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}
.chosen-disabled .chosen-single {
  cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

[usumoio]

Hello All. I am also seeing this issue in the latest version of chrome. I am observing that the input has a padding of 5px and margin of 15px. These are what is causing the cutoff. I'm not yet sure if this issue is caused by bizarre interaction between bootstrap and chosen. I'm not a CSS person so I'm still working on figuring this out. I just wanted to report a second instance of this bug.

BTW This tool is pretty dope. It's saved me a bunch of time. Peace.

[stutteringp0et]

I saw this in Chrome (latest) as well. When the dropdown is lowered and then retracted - the placeholder obtains an appropriate width automatically.

[jk171505]

bug not solved and closed?

[pfiller]

It's closed because nobody has provided a link to a reproduction of the issue that we can test out. We can't fix a bug we can't make happen.

As @tjschuck said:

Can you link to a publicly accessible page (or better, a Fiddle) that shows the issue so we can attempt to reproduce?

[orloc]

https://jsfiddle.net/h6f3hoks/

Fiddle as requested @usumoio is correct about bootstrap interference it seems.

I am viewing this on the latest chrome version.

[pfiller]

Thanks @orloc, but the placeholder width seems to be working as expected in the Fiddle (at least for me). Can you tell me the steps to recreate the problem?

[trinzia]

Fiddle: https://jsfiddle.net/h6f3hoks/1/

I see this HTML:

<li class="search-field">
  <input type="text" value="Choose US States" class="default" autocomplete="off" style="width: 118px;">
</li>

If you remove the padding from:

.chosen-container-multi .chosen-choices li.search-field input[type="text"]

Then the placeholder text almost fits.

So I think that the width 118px, assigned by JS, should be using an outerwidth to get padding instead of just the width of the text.

[orloc]

Hey all, trinzia is defiantly onto part of it.

In-so-far-as re-producing the problem - all i needed to do was to pull in bootstrap3.02 and the problem persisted.

The solution might be more helpful. This (albeit may not be 100% correct as its kinda hacky) is what im doing atm:

.chosen-container-multi .chosen-choices li.search-field input, .chosen-container-multi .chosen-choices li.search-field input[type=text] {
padding: 0!important;
}

[rickshawhobo]

I also have this problem. I found a solution by adding this rule
.chosen-container .search-field {
float: none;
}
The problem is that the <li class="search-field"> where the placeholder goes was inheriting a float: left from

.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}

[marianadgeorgieva2]

The problem is that the input in the serach field has width of 90px. I fixed it by adding this CSS rule:
.chosen-container .search-field input {
width: 100% !important;
}

[thatsus]

What we found out that under the li.search-field the input has an inline style of what ever width it wants to. This needs to be width: 100%. Once this is done anything in the data-placeholder will fit.

[fskhalsa]

Following _marianad's_ suggestion:

Add this to your CSS if you're looking for a solution. It will solve the cutoff issue, and in addition will avoid making the text wrap to a second line too early, as happens when using just the base selector suggested by _marianad_ above.

.chosen-container .chosen-choices .search-field:only-child input {
    width: 100% !important;
}

EDIT:
Most recently, I've found this to be the necessary solution. Not sure if this only applies to later versions of _chosen_ or not:

.chosen-container .chosen-choices .search-field:only-child,
.chosen-container .chosen-choices .search-field:only-child input {
    width: 100% !important;
}

[sudheerkaushik]

The jsfiddle

https://jsfiddle.net/shudhpandit/0h0qwtor/

Os: Windows 7
Browser: Chrome latest.

[akshayvadher]

I did $('.chosen-select').trigger("chosen:updated"); when it is shown as work around

[abigperson]

@fskhalsa "latest" CSS solution is working for me. Chrome 57 w/ Bootstrap 3.3.7
@akshayat solution works with no CSS
Thanks, big help on a frustrating issue! Great tool now that this little bug is sorted out.