Results 1 to 10 of 10

Thread: ComboBox selection arrow is displaced

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default ComboBox selection arrow is displaced

    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.

    DisplacedSelectionArrow.png

    See also the below code that causes the issue.

    Code:
    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);
        }
    }

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Does your css version that you load match the version of your gxt.jar?

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    Yes, I'm using the ext-all.css from GXT 2.2.5

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Quote Originally Posted by nastra View Post
    Yes, I'm using the ext-all.css from GXT 2.2.5
    In that case it normally should be called gxt-all.css

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    sorry for the typo, its called gxt-all.css
    Are there any other possibilities that could cause that issue that come to your mind?

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    I have the following structure in my war file

    Code:
    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

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    Any ideas why that error occurs?

  8. #8
    Sencha User
    Join Date
    May 2011
    Location
    Illinois
    Posts
    32

    Default

    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.

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    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.

  10. #10
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    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.

    Code:
    img {
       margin-top: 20px
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •