GWT SuggestBox Popup same size as Input Field

Question

I tried to create a SuggestBox with GWT and everything worked correctly so far. But I would like to have the Popup of the SuggestBox to have the same size as the Input Field, but I haven't found a way to do this.

I would be happy, if you could give me a tip.

Greetings Kevin

Answer 1

If your SuggestBox has a fixed width, let say 200px, you can apply the following style

.gwt-SuggestBoxPopup .item{ width:  198px;}

Answer 2

Create a custom class extending DefaultSuggestonDisplay and override showSuggestions method

import java.util.Collection;

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay;
import com.google.gwt.user.client.ui.SuggestBox.SuggestionCallback;
import com.google.gwt.user.client.ui.SuggestOracle.Suggestion;

public class CustomSuggestionDisplay extends DefaultSuggestionDisplay
{
    @Override
    protected void showSuggestions( SuggestBox suggestBox, Collection< ? extends Suggestion> suggestions, boolean isDisplayStringHTML, boolean isAutoSelectEnabled, SuggestionCallback callback )
    {
        super.showSuggestions( suggestBox, suggestions, isDisplayStringHTML, isAutoSelectEnabled, callback );
        getPopupPanel().setWidth( ( suggestBox.getElement().getAbsoluteRight() - suggestBox.getAbsoluteLeft() ) + Unit.PX.getType() );
    }
}

Use the following suggest box consturctor

SuggestBox suggestBox = new SuggestBox( new MultiWordSuggestOracle(), new TextBox(), new CustomSuggestionDisplay() );