Combobox auto width problem

[jahangir]

I have an EasyUI combobox on my web page, and I have set its panel width property to 'auto'. However, I have noticed that if the panel has a vertical scroll bar, then the text is wrapped, whereas if there is no vertical scroll bar, then the text is displayed as expected.

Code:

<div style="margin-bottom:20px;width:200px">
    <select class="easyui-combobox" label="Language" style="width:100%" data-options="panelHeight:180, panelWidth:'auto'"> 
      <option value="zh-cht">Chinese Traditional</option>
      <option value="ar">Arabic</option>
      <option value="bg">Bulgarian</option>
      <option value="ca">Catalan</option>				
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
  </div>    

Code:

<div style="margin-bottom:20px;width:200px">
    <select class="easyui-combobox" label="Language" style="width:100%" data-options="panelHeight:200, panelWidth:'auto'"> 
      <option value="zh-cht">Chinese Traditional</option>
      <option value="ar">Arabic</option>
      <option value="bg">Bulgarian</option>
      <option value="ca">Catalan</option>				
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
  </div>    

[jarry]

Please set the CSS style for the 'combobox-item' to solve this issue.

Code:

<style>
	.combobox-item{
		white-space: nowrap;
		padding-right: 20px;
	}
</style>

[jahangir]

Thanks Jarry it works perfectly.