View Full Version : Combobox inside toolbar - trigger does not align properly

16 Jun 2014, 7:36 PM
I have a combobox inside a toolbar, but the trigger (down arrow) isn't aligned with the box. (I have tested in current Chrome and IE). Here's the relevant portion of my code:

Ext.define('Maverick.grid.techClockEntries', { extend: 'Ext.grid.Panel',
id: 'tech-clock-entries-grid',
renderTo: Ext.get('tech-clock-entries-grid-container'),
store: techClockEntriesStore,
features: [filtersCfg],
title: 'Tech Clock Entries',
columns: [{ ... }],
dockedItems: [{
xtype: 'toolbar',
id: 'tech-clock-entries-grid-toolbar',
store: techClockEntriesStore,
dock: 'top',
displayInfo: true,
items: [
xtype: 'combo'


... and here's what it looks like:


Can anyone give me any idea what I'm doing wrong?

Gary Schlosberg
20 Jun 2014, 12:29 PM
In which version of ExtJS are you seeing this? I cobbled together an example from the docs and your code and it seems to work without that problem.

Could you be affecting it with some CSS somewhere?

20 Jun 2014, 12:51 PM
Yes, it turns out it was a problem with my CSS :"> I had a universal "padding" setting for input elements. I tried to use Firebug to find that sort of problem, but for some reason it didn't show up - perhaps because ExtJS replaces the input element entirely? The only way I found it was by disabling all my external CSS, and working through the process of elimination.

Thanks for your analysis!