Width Problem

[alexfrancavilla]

Hi, when I use chosen on a select field like this:

<select id="mySelect" style="width: 65.935%;" multiple>

Chosen generated the <ul class="chzn-choices"> with a width of 65.935 pixels instead of percent. For the moment I've hacked it with this initialization here

$('#inputNewRecipient').chosen().next().css('width', '65.9574%');

Kind regards

[stof]

Are you using the latest version of Chosen ?

And which browser are you using ? And which version of Chosen (jQuery or Prototype) ?

[alexfrancavilla]

Sorry for forgetting all this - was a bit in a hurry!
Chosen version is up2date (0.9.13), jQuery Version, Browser is the newest Firefox @ Ubuntu 10.04.
I've just retested it and it turned 65.5% to 55.5px, by the way I'm using Bootstrap.

[pfiller]

There isn't a great way to rely on style / css for getting the user-defined width (modern browsers return the actual width instead) which means that Chosen automatically ends up with a pixel value. We don't want to be forced to do a re-calculation on screen resize, so we provided an optional interface for percentage widths.

$('#inputNewRecipient').chosen({ width: '65.9574%' });

[alexfrancavilla]

@pfiller I am now using the chosen interface to set the width. Now my placeholder text got cut off by the generated width: 55px, is this an issue with chosen?

[pfiller]

Chosen will make the input field as big as it can within its container. Sometimes that means the placeholder text gets cut off. If you want the text to fit in Chosen, you need to make Chosen at least that big.

I did notice a small issue while investigating this. Basically, the field can be allowed to grow larger than the container in certain cases. See: #1167

[alexfrancavilla]

The Box was around 600px wide and the placeholder text got cut off after around 6-7 letters.

[netbrain]

I'm having the same issue.

I've set the width property of chosen to a percentage (33%), and then this happens.

Worked around the issue by overriding these css styles:

... li.search-field{
width: 100%;
}

... li.search-field input.default{
width: auto !important;
}

[Gulshan-Doorgah]

Had similar issue also:
Overriding the following styles worked for me:

li.search-field{
width: 100%;
}
li.search-choice + li.search-field{
width: 20%;
}

[danielmahadi]

This fixed the issue for me

li.search-field{
width: 100% !important;
}
li.search-field input.default{
width: 100% !important;
}