EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jahangir on April 04, 2023, 02:30:57 AM


Title: Combobox auto width problem
Post by: jahangir on April 04, 2023, 02:30:57 AM
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>   

(https://www.linkpicture.com/q/img1_23.png)

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>   

(https://www.linkpicture.com/q/img2_23.png)

Title: Re: Combobox auto width problem
Post by: jarry on April 05, 2023, 07:29:37 PM
Please set the CSS style for the 'combobox-item' to solve this issue.
Code:
<style>
	.combobox-item{
		white-space: nowrap;
		padding-right: 20px;
	}
</style>

Title: Re: Combobox auto width problem
Post by: jahangir on April 05, 2023, 10:03:52 PM
Thanks Jarry it works perfectly.


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines