CSS styles for a GWT SuggestBox

July 6th, 2008 Alex Moffat Posted in EffectiveGWT, GWT | No Comments »

I’ve wanted for a while to experiment a bit with the GWT SuggestBox widget. I’m most interested in the performance of a SuggestBox that gets suggestions from the server and how best to structure the code for one. Once I got started though I realized that the first problem I had to solve was how to get a reasonable looking SuggestBox for the examples. In this post I describe the HTML structures created by a SuggestBox and how to use CSS to style them. The next post will talk about how to use SuggestionOracle etc.

As you’ll soon see I’m not a graphic designer so the final result isn’t all that great. I hope it gives you some ideas for how to do a better job yourself though.

A SuggestBox consists of an input field and a popup list of suggestions. The documentation for SuggestBox lists the various CSS classes that are added to the various parts of a SuggestBox but doesn’t describe the actual HTML structure. By the way, the list of suggestions is displayed by a class that is a subclass of MenuBar so lots of the CSS used here is applicable to MenuBar as well.

The image to the left shows the outermost parts of the HTML. An input field, in brown, at the top, with the style gwt-SuggestBox and the popup below. The popup is constructed out of various pieces. The outermost is a div, in green, with the class gwt-SuggestBoxPopup. Inside of that are two more divs, shown with green dashes, that have no assigned class, and then a table and tbody, shown with blue dashes, that also have no assigned class. A very simple result can be achieved with nothing more than adding a background and border to the gwt-SuggestBoxPopup.

.gwt-SuggestBoxPopup {
    background-color: lightblue;
    border: 1px darkblue solid;
    padding-left: 2px;
    padding-right: 2px;
}

The CSS above will give you a popup that looks like the image below. This is a screen capture from Firefox 3.



Looking at what’s inside the tbody reveals a structure that can be used to add, shudder, rounded corners. There are three table rows, tr, shown with red rounded outlines. Reading downwards from the top these have classes of suggestPopupTop, suggestPopupMiddle, and suggestPopupBottom. Each row contains three cells, td, shown with orange outlines, and the classes for these can be derived by adding Left, Center or Right to the class of the containing row. So, the top most righthand cell has the class suggestPopupTopRight. Furthermore each cell contains a div, shown with a green border, that has a class derived from its containing cell by appending Inner. So, the div in the center of the lowest leftmost cell has a class of suggestPopupBottomLeftInner. The div in the very center has a class of suggestPopupContent in addition to suggestPopupMiddleCenterInner. Using CSS to apply background images to the table cells following this pattern

.gwt-SuggestBoxPopup .suggestPopupTopLeft {
    background: transparent url(tl.gif) no-repeat;
    width: 11px; height: 11px;
}
.gwt-SuggestBoxPopup .suggestPopupTopCenter {
    background: transparent url(tc.gif) repeat-x;
    height: 11px;
}
.gwt-SuggestBoxPopup .suggestPopupTopRight {
    background: transparent url(tr.gif) no-repeat;
    width: 11px; height: 11px;
}

gives you a popup that looks like the image below on IE6. Not very attractive but the corners are round.


The final layer of HTML displays the actual selections. This has a div inside the suggestPopupContent div. This has various attributes and style properties set so that when elements inside the div get focus this is made visible by the default browser mechanisms. Inside this div is a table and tbody that has a row, tr, for each suggestion being displayed. Finally at the lowest level is a cell, td, for each suggestions. This is the only element with a CSS class set. Two classes are used item is applied to all the suggestions and in addition item-selected is applied to the selected item. Using these two CSS declarations

.gwt-SuggestBoxPopup .item {
    padding-left: 2px;
    padding-right: 2px;
}
.gwt-SuggestBoxPopup .item-selected {
    background-color: lightyellow;
}

gives this effect in FF3.



Next time, providing suggestions, and hopefully a better looking style.