Select in FireFox wraps button

General
1

Hi all,

I am using vaadin 6.7.6 with a Select. My problem is that the button to open the drop down is wrapped to a new line (but still at the right side).

I figured out that the prolem is:

.v-filterselect {
text-align: left;
white-space: nowrap;
}

If I disable “white-space: nowrap;” e.g. in FireBug the problem disappeares and the button is correctly displayed in the same line.

I tried it with InternetExpolorer 9 and with Safari 5 but both browser don’t have the problem.

Do you have any ideas how I could solve this?

Kind regards
Ralph

2

There has been some changes to the layout of Select and ComboBox in recent maintenance releases, so I would suggest that you first verify that your widgetset is up to date and that you are not getting old versions of the theme css files from your browser cache.

It sounds quite interesting that removing the nowrap property should stop the button from wrapping… Does this happen with any of the built in Vaadin themes or are you using your own theme?

There is also at least one known bug where the button wraps to another line, but your description does not sound like
#7013
.

3

Hi Leif,

I checked the widgetset and the browser cache and there was no problem. I also uses different themes (chameleon, runo, base) but the problem was always the same. IE and Safari work fine but firefox wraps the button!

Ralph

4

Hi all,

is there anything else I can check to get the problem solved? Now i use NativeSelect to avoid the wrapped button, but I am missing some features like reducing the entries while typing.

Best regards
Ralph

5

Hi all,

after a lot of investifation I finally solved the problem. Let me describe what I did.

  • My problem app is embedded in a jsp context using a div as described in the “Book of Vaadin”
  • I reduced my app to a Label and a Select
  • I created a new “native” vaadin App from eclipse plugin with the same content
  • I startet both apps and compared the html code

What I found was that the new “native” app has some additional classes in the top level div:

  • v-app
  • v-theme-chameleon
  • v-app-Testvaadin1Application

After adding one of them to my div the problem was solved. Finally my div looks like this:

Without “v-app” in the class attribute the button wraps and with it everything works fine.

If this is really necessary to avoid those problems it would be a great idea to update the docs. If I am wrong please tell me!

Hopefully my description helps someone else to solve a similar problem …

Best regards
Ralph

6

Ah, that explains why I couldn’t reproduce the problem using the standard way of opening Vaadin applications.

In some cases, themes include .v-app in the CSS selector to ensure it’s more specific and thus overrides similar styles from the base theme.

I’ve created a ticket for updating the documentation:
http://dev.vaadin.com/ticket/8732
.