Combo Box Disappearing arrow!

Vaadin 6 / 7 / 8 Framework UI
1

I have been having some issues on a couple of projects with the Combobox component. I have attached two images below the first is the Combobox just as the page is loaded (which is as it should be), It is currently filled with one object which is a String.
Once I have clicked the arrow then clicked the string the 2nd image happens.
The correct object is selected but the arrow has disappeared.

I thought that this could be to do with the size of the layout that is it on and the layout could be shrinking as it isn’t a set size making the arrow disappear. This wasn’t the case as adding other components next to the Combobox still makes the arrow disappear and the components stay visible.

This has also happened on a different project I was working on, however this time it was not with selecting an item in a Combobox it was with clicking on popup view next to the combo box this made the arrow disappear.

The arrow will reappear if I click on the combo box and start typing a valid entry and then select it.

If I insert a long label in front of the combo box this solves the mysterious disappearing arrow.

Any possible solutions you can give would be much appreciated,
Thanks
Damian
11485.bmp (23 KB)
11486.bmp (27.9 KB)

2

Upon a little further investigation i have discovered that this only occurs in IE. (version 8). The graphic bug does not occur in mozilla.

3

Tested the
Runo Theme demo
 with WinXP/IE8, no problems occured.

What version of Vaadin are you using? Do you have any custom theme in use, which extends Runo? If you have, try the application with plain Runo, and see if it still happens (add url parameter ?theme=runo for to test it quickly).

4

i was using a custom theme that extended runo but i havent made any changes to the combobox css. I have tested the issue with only the runo theme and the arrow still disappears.

My version of vaadin is 6.4.3.

ive noticed it also does when clicking a popup view on the page.
If i have 2 comboboxes next to each other it will only make one of the arrows disappear?

im puzzled!

5

Puzzling…

Provide a simplified test case (minimal source code to reproduce the error), where this problem is evident, and we’ll see if we can fix it.

6

Hello,
Thanks for all you help Jouni.
I tried to get a simple code example for you but i couldnt it only worked in my application.
I have now updated my version or vaadin and this has fixed my problem. So im not sure what the fix was but thanks
:smiley:
Damian

7

This still happens for me using vaadin 6.5.2, runo theme and chromium browser.
See bug with attached trivial sample app:
http://dev.vaadin.com/ticket/6585

8

It turns out that it is related to zooming in my case. (thanks Artur Signell)
Zooming up or down fixes it, but I still have the problem on some zoom levels eg. 120%
(in Chromium 8.0.552.237 (70801) Ubuntu 10.10)

9

I also randomly had this problem in Chrome.

I changed the CSS to

.v-filterselect-button {
margin-left:auto;
margin-right:0px;
float:none;
}

Now it is fine.

10

I’m having a similar problem

This only happens on our production server after running for a few hours (or perhaps it’s activity/views that’s doing it). I’ve been unable to track down what exactly is causing it.
Restarting the server fixes the problem but it randomly appears again.

Here is the generated html for the auditor selector,

	<!-- Working as it should be -->
	<div style="overflow: hidden; padding-left: 0px; padding-top: 0px; position: absolute; left: 130px; top: 92px; width: 394px; height: 23px;">
		<div style="float: left; margin-left: 0px;">
			<div class="v-filterselect v-filterselect-required v-filterselect-prompt" style="width: 313px;">
				<input type="text" class="v-filterselect-input"	style="width: 286px;"><div class="v-filterselect-button"></div>
			</div>
		</div>
		<div class="v-caption"
			style="float: left; width: 7px; margin-left: 0px;">
			<div class="v-required-field-indicator">*</div>
			<div class="v-caption-clearelem"></div>
		</div>
	</div>

	<!-- Broken -->
	<div style="height: 23px; overflow: hidden; padding-left: 0px; padding-top: 0px; position: absolute; left: 130px; top: 92px; width: 394px;">
		<div style="float: left; margin-left: 0px;">
			<div class="v-filterselect v-readonly v-filterselect-prompt" style="width: 313px;">
				<input type="text" class="v-filterselect-input v-filterselect-input-readonly" style="width: 286px;" readonly=""><div class="v-filterselect-button"></div>
			</div>
		</div>
	</div>

The environment it’s running on is:

Java jdk1.7.0_09
tomcat-7.0.34
Vaadin 6.8.7
IE 8 (must work on this as it is our only choice)
Chrome 24 (also exhibits the same problem)

Screenshots of working and broken follow.
12823.png
12824.png

11

This appears to be a different problem. It says they are read only in the style, it would seem that is the issue???

12

I have tried to hack up the html to enable it again. With the read only removed you can enter text into the box but the drop down and search functionality doesn’t work and it just looks like a plain html . Also as per the code snippet there is part of the code that isn’t even being generated…

The read-only css is also being applied in error.

13

Hi,

We are experiencing the same problem in IE9. It looks like the arrow moves down. It is not visible but when I click at the right bottom corner of the combo, it opens. I have two columns of combo boxes - combos in one column have the issue and combos in second column are fine. It’s weird, since all combos are created in the same way. We are using Vaadin 6.8.10, JDK 6, Tomcat 5.5.35.

I have applied CSS that Ryan How posted and it is fine. So many tanks Ryan…

14

Is the page zoomed to something else than 100%? That is the only situation where I’ve seen something like that in the past.
Is this reproducible with the default themes without any customization. If not, the problem is most likely somewhere in your theme.

Of course, this should not happen at least with the standard themes, so please
file a bug report
 with information on how to reproduce this and a minimal UI class with which this can be reproduced if not reproducible e.g. in public demos.

15

Hi all,

I am having a similar issue. If I use the
setWidth()
 function on my ComboBox then the arrow on the right disappears!
If I don’t call it then it looks fine… Does anyone have any idea why?

Firefox 26.0
Vaadin 7.1.10
Java 1.7
TomEE Plus 1.6.0

Cheers!
13432.png
13433.png

16

This sounds strange. Do you have anything that could be related to this in your theme?

If you can create a minimal UI class that uses the default theme and demonstrates the problem, please
create a ticket
.

17

Indeed, looks like it was related to the theme…
A colleague changed it and now on my side my combo boxes are working fine again.

Thanks for your prompt assistance!