[CLOSED] Mulitple StoreFilterField result in overlap

[eldimo]

Hi,
I'm adding more than one StoreFilterField in a toolbar, like so:

actionToolBar.add(new AdapterToolItem(storeFilterFieldOne));
actionToolBar.add(new SeparatorToolItem());
actionToolBar.add(new AdapterToolItem(storeFilterFieldTow));

But the "X" icon on the right side of the first filter (used for resetting the filter) overlapps on the second filter.

[maku]

It overlaps also when you place a TextToolItem as second component to the toolbar

[darrellmeyer]

TriggerFields, including StoreFilterField, require a width be set. You can fix your code by simple setting the width of the first filter field:

storeFilterFieldOne.setWidth(150);

I have changed the code for StoreFilterField to set a default width. The change is in SVN.

[sfrancolla]

Hi Darrell --

I'm experiencing this same behavior regarding hanging cancel, X, image to the right of the filter field. I'm coding with gxt-1.0-rc1b and see the issue with at least IE7 and FF3. I tried your setWidth fix but it has no effect.

Here's my code:

...
      StoreFilterField<TreeModel> filterField = new StoreFilterField<TreeModel>() {
         @Override protected boolean doSelect(Store store, TreeModel parent, TreeModel record, String property, String filter) {
            // only match leaf nodes  
            if (!record.isLeaf()) {
               return false;
            }
            String name = record.get("name");
            name = name.toLowerCase();
            if (name.startsWith(filter.toLowerCase())) {
               return true;
            }
            return false;
         }
      };
      filterField.setWidth(150);
      filterField.setEmptyText("Filter images...");
      filterField.bind(store);

      ToolBar toolBar = new ToolBar();
      toolBar.add(new AdapterToolItem(filterField));
      west.setTopComponent(toolBar);

      VerticalPanel treePanel = new VerticalPanel();
      treePanel.add(tree);
      west.add(treePanel);
...

The result:


More ideas? Thanks!

Steve

[darrellmeyer]

First, what you are trying to do looks exactly the same as the Explorer Demo. So take a look at NaviationView.

Second, without complete test code, it is hard for me to guess what is happening in your code. Why are you using a VerticalPanel? The screenshot does not show the bottom of the panel so I cannot be for sure if it is needed. Try your code without it just to test.

If you still have issues, post some code in this format, and I will try to take a look.

[sfrancolla]

First, what you are trying to do looks exactly the same as the Explorer Demo. So take a look at NaviationView.

Right, that's the effect I'm going for. It'd be great if the pretty source for that page was available somewhere... is it?

Thanks.

[darrellmeyer]

Yes it is available in the package under samples/explorer/src.

[sfrancolla]

Figured it out. GWT's default css file defines margin-top: 20px; on all img elements which pushes the cancel button downward. I cleaned out the gwt defaults.

Thanks for your time.