Problems with ComboBox icon margin calculation

I know from
another thread
that the margin for icons in ComboBoxes is automatically calculated so that the icon is (hopefully) centered. I am having a problem where that’s not happening correctly. The icon will start below center and then as the filter menu is shown it sometimes moves progressively downward. Screenshot:

What should I look at to diagnose the problem?

More info:

  • There are two kinds of icons displayed: a ThemeResource and a StreamResource (from a generated PNG). Both types of images display the problem so I don’t think it’s a problem with my usage of StreamResources. But, in case there are any gotchas, please be aware. (The icon coming from the StreamResource uses a file name with a timestamp of the service start time, so I don’t think there are any caching issues with it.) The icons are 16x16.
  • I’ve cleaned my browser cache and tried a different browser that had never seen the resources before.
  • I’m using a theme derived from the QuickTickets Dashboard, though I don’t think that’s relevant since my problem is the margin in the element style.

Generated HTML source:

<div role="combobox" class="v-filterselect v-widget v-has-width v-filterselect-no-input" style="width: 300px;">
  <img class="v-icon" src="http://localhost:8888/APP/global/1/legacy/20/color-swatch--1-1388764537707" style="margin-top: 12px;">
  <input type="text" class="v-filterselect-input v-filterselect-input-readonly" aria-readonly="true" readonly="" tabindex="0" style="width: 100%;">
  <div class="v-filterselect-button" aria-hidden="true" role="button"></div></div>

I’ve made the problem some-what more bearable with this CSS which removes the margin altogether (obviously it could be more specifically selected and obviously this is pure evil):

.v-filterselect img {
    margin-top: 0 !important;

I’m using Vaadin 7.1.8 running under Jetty.


Sounds strange. The margins work just fine in the
Sampler ComboBox example
, so there must be something different.

Calculation of the top margin for the icon tries to calculate the height if the icon element. My guess is that it gets 0 for some strange reason, and therefore positions the top of the icon in the center. Could the PNG files be somehow corrupted or something?

Can you work around the problem by defining the correct height (16px) for the img element in CSS?

It sounds a lot like a bug, although filing a ticket without a more detailed problem description would probably result as “worksforme”, as icons normally work with CB. So, a minimal test case that reproduces the problem with an included icon would be needed.

There’s some different handling in the relevant code for IE8. Which browser are you using?

I’m using Chrome mainly but I also see the problem with Safari and Firefox (I’m on Mac).

The icon is correctly rendered in the drop-down, just not when actually selected. So, this makes me think it’s not (completely, at least) a problem with the PNG.

I switched back to the default theme and it’s behaving correctly. So, looks like it’s a problem with the theme.

Can you tell me how that margin is calculated? I’m not sure what parts of my theme to look at. When using my theme the element is given the explicit margin of 13px whereas it’s only 4px with reindeer. So somehow the code is looking at the CSS (is this possible?) and adjusting the margin based on that.