View Full Version : Combobox size problem when centered

21 Aug 2009, 12:06 AM

Im expériencing a problem with combobox, when they are rendered in a div with text-align: center.

It centers the field without taking care of the combo trigger.

I've modified the combobox example page to show the probleme :

// Added background, border, width un align center to see the problem
<div style="background-color: red; border: 1px solid blue; text-align: center; width: 150px;">
<input type="text" id="local-states" size="20"/>
<div id="state-combo-code-panel" style="margin-top:10px">
<pre id="state-combo-code" class="code"><code>// simple array store
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state'],
data : exampleData
var combo = new Ext.form.ComboBox({
store: store,
width: 150, // Added the same width so we can see if it's well centered
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
applyTo: 'local-states'

The result is attached in thumbnail. Someone has a clue how I could fix it, and if it's a bug or a miss of config ?

Thank you.

21 Aug 2009, 2:34 AM
how about removing that style from that div - what value does it add to the combo box?

21 Aug 2009, 2:48 AM

I don't think you understand the problem, or I don't understand what you're saying :)

I don't care about the combobox value. The styles in the div are here to show the problem, if I remove the width, the div will take 100%, and it'll be much harder to see if my combobox is centered !

But maybe I can add a property to the combobox to handle it's alignment itself.

I'll try.