Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Combo Box different looking in IE9 vs Chrome

s b
9 years ago Jul 06, 2012 6:07pm

I am attaching 2 snapshots of a combobox i added. In chrome it looks good. But in IE 9 the arrow is little bit down. Not aligned perfectly. Any help in tweaking this will be appreciated. I am adding this ComboxBox as a field inside a Form.

hl = new HorizontalLayout();
		final ComboBox selectAction = new ComboBox("Choose Action");
		performAction = new Button("Apply Action");
		resetAction = new Button("Reset");
		searchButton = new Button("Search");
		ordersSearchForm = new Form();

		selectAction.addItem("A");
		selectAction.addItem("C");
		selectAction.addItem("B");
		selectAction.setNullSelectionAllowed(false);

		ordersSearchForm.addField("selectaction", selectAction);

		hl.setSizeFull();
		hl.addComponent(ordersSearchForm);
		setCompositionRoot(hl);
Last updated on Jul, 6th 2012
Tobias Demuth
9 years ago Jul 07, 2012 9:25am

Just checked the sampler with IE9 and the ComboBox looks perfectly fine. As the default look of a ComboBox has rounded corners but your screenshots shows edgy ones, I think that you have a diffenrent theme set which causes the trouble. Would you share the relevant parts of the CSS?

Jens Jansson
9 years ago Jul 07, 2012 9:46am

That looks like chameleon to me. I guess you have some own modifications on top of the theme? Those can break things like this if they are not correct. Try adding to the end of the URL string ?theme=reindeer (or even ?theme=chameleon) to see if it fixes the problem. If yes, then it is your theme that is causing the problems.

+1
s b
9 years ago Jul 08, 2012 2:17am

the theme i am using is
@Override
public void init() {
setTheme("runo");
initLayout();
}
i have not touched any CSS or themes. so if I am getting
this behavior then I am not sure why. (But looks like the themes)

tried ?theme=reindeer
and ?theme=chameleon, this looks good

actually, even with the runo theme i am not able to reproduce the problem anymore.

Eric Roberge
9 years ago Jul 08, 2012 11:29am

Hi sb,

something similar happen to us.

The problem was that the layout containing the comboBox was to to tight (do not have enough extra widht) AND the zoom of IE9 was 105%.
Setting IE to 100% zoom resolve the problem.

We try the 105% in FF and Chrome for the same layout and both browser display verry well the layout.