PDA

View Full Version : ComboBox selection arrow is displaced



nastra
30 Dec 2011, 7:51 AM
The arrow of each combobox is displaced in all browsers (i tried firefox, chrome, opera). Does anybody know what the problem could be? Any help is appreciated.

30380

See also the below code that causes the issue.


public class MyApp implements EntryPoint {
@Override
public void onModuleLoad() {
LayoutContainer container = new LayoutContainer();

final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setEmptyText("Select an item...");
combo.setDisplayField("item");
combo.setWidth(150);
combo.setTriggerAction(TriggerAction.ALL);
combo.add("Value1");
combo.add("Value2");
container.add(combo);
container.setBorders(true);
container.layout();
RootPanel.get().add(container);
}
}

sven
30 Dec 2011, 8:02 AM
Does your css version that you load match the version of your gxt.jar?

nastra
30 Dec 2011, 8:10 AM
Yes, I'm using the ext-all.css from GXT 2.2.5

sven
30 Dec 2011, 8:12 AM
Yes, I'm using the ext-all.css from GXT 2.2.5In that case it normally should be called gxt-all.css

nastra
30 Dec 2011, 8:13 AM
sorry for the typo, its called gxt-all.css :)
Are there any other possibilities that could cause that issue that come to your mind?

nastra
30 Dec 2011, 8:58 AM
I have the following structure in my war file


war
|- myapp (contains the MyApp.html that uses the css file resources/css/gxt-all.css)
|- resources
|- css (this is where the gxt-all.css is)

|- META-INF
|- WEB-INF
|- classes
|- deploy
|- lib

nastra
5 Jan 2012, 9:42 AM
Any ideas why that error occurs?

Joshua093
5 Jan 2012, 12:00 PM
I know that I had this issue about 6-8 months ago and I forget how I got around it. For some reason I am thinking that the border on the layout container was causing our issue. Try setting the border on the layout container to false and see if that does it.

I'm no expert with CSS but it looks like the image is always right aligned and the box is always left aligned and something is causing the two to be split on different lines rather than make sure they are displayed inline. I don't think this is an issue with IE, just Chrome, FF and Opera.

In the mean time I will dig through my code and see if I can track down my solution.

nastra
5 Jan 2012, 12:40 PM
I tried it with IE and it has the same issue. I also tried to use the css files and the gxt libraries from the example application as proposed by sven, still nothing changed. I'm really freaking out as this is some real strange issue. This issue e.g. also results in some weird behavior when i have a tree with checkboxes. The result is that I'm not able to check a single tree item.

Thanks Joshua for your help, it would really mean a lot if you could remember how you solved the problem.

nastra
6 Jan 2012, 12:53 AM
Ok I found out why this is happening. I'm using the Maven GWT plugin in my project, thus I used this plugin to generate the archetype. I have a MyApp.css file that was automatically generated in order to introduce custom css layouts. However, I never looked into that css file. This generated css file contained, amonst others, a top margin for all images. And of course this margin was causing this issue. I think this thread can be closed then. Thanks for your support.


img {
margin-top: 20px
}