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.
Thanks!