How-to: SuggestBox popoup auto scroll

[joster]

Hello-

How do I add a scroll for the SuggestBox popup? Currently, I have a
SuggestBox popop, for which I want to:
- make the height of popup = 300px
- add a scroll (automatically) whenever there are more elements
which cannot fit into 300px height

How can I achieve this?

Thanks in advance.

Joster

[efree...@gmail.com]

I have achieved this by changing SuggestBox code:

Before:

public SuggestionPopup() {
super(true);
setWidget(suggestionMenu);
setStyleName(STYLENAME_DEFAULT);
}

After:

public SuggestionPopup() {
super(true);
setWidget(new ScrollPanel(suggestionMenu));
setStyleName(STYLENAME_DEFAULT);
}

Seems to work, you can set height by css or directly in code.
How to build gwt from source: http://code.google.com/webtoolkit/makinggwtbetter.html#compiling

[Isaac Truett]

You can do this without modifying SuggestBox. Just use the CSS
overflow property to make the suggestion menu scroll.

[joster]

Thanks. How do you set the CSS overflow property to make the
suggestion menu scroll?

Joster

On Aug 24, 4:34 am, "Isaac Truett" <itru...@gmail.com> wrote:
> You can do this without modifying SuggestBox. Just use the CSS
> overflow property to make the suggestion menu scroll.
>

[Isaac Truett]

If you're not familiar with using CSS, I would read up on that before
going any further. There are plenty of good tutorials online. Building
attractive user interfaces with GWT will be a lot easier once you have
a working knowledge of CSS.

[joster]

Thanks.

OK, I think I figure out how to get the scroll going, but now I have
alignment issues if there are one or two suggestions displayed in the
popup of SuggestBox and the popup height is larger.

For example, let's say I only have one suggestion displayed in the
popup of SuggesBox, with the following CSS, the suggestion is shown in
the center of it. I would like it to be flushed to the top, how do I
do this?

Joster

.gwt-SuggestBoxPopup {
font-size: 83%;
font-weight: normal;
background-color: #ffffff;
border: solid 1px blue;
width: 250px;
height: 500px;
overflow: scroll;
vertical-align: top; /* VERTICAL ALIGNMENT SET, BUT THE TEXT
IS SHOWN ON THE CENTER OF THE POPUP, WHY? */
}

On Aug 24, 9:08 am, "Isaac Truett" <itru...@gmail.com> wrote:
> If you're not familiar with using CSS, I would read up on that before
> going any further. There are plenty of good tutorials online. Building
> attractive user interfaces with GWT will be a lot easier once you have
> a working knowledge of CSS.
>

[joster]

Anyone knows what I am doing wrong? I cannot seem to get the
suggestions flushed to the top edge of SuggestBox popup.

Thanks.

[Isaac Truett]

Welcome to HTML tables. The element that gwt-SuggestBoxPopup is
attached to is a table. That means that your height is the height of
the table, and each row is taking its fair share. You can make the
first item move to the top by setting .item { vertical-align: top; }
however, I think the name of the CSS class applied to each item will
likely change (see
http://code.google.com/p/google-web-toolkit/issues/detail?id=1562&sort=-id).
Wait, there's more! That only works for the first item. If you have
two suggestions, each one will be occupying half of your 500px height.
That means the second one is ~250px down the page. Can't make that one
appear directly below the first.

I'm assuming that you want to size the popup for some aesthetic
reason. What you probably need to do is size the div surrounding the
table, not the table itself. The problem is that GWT doesn't put a
class on the wrapper div. I *think* I remember seeing how to write a
CSS parent selector (match element x that has a child element y) but I
can't a quick search just now didn't reveal any such option. The best
fix, I think, would be for the wrapper div to have a CSS class of its
own, such as gwt-SuggestBoxPopupWrapper. You might be able to hack
around this by getting a reference to the popup, getting its parent,
and adding a style name to it. I don't actually have that much
experience with GWT's SuggestBox, so perhaps another developer could
chime in here?

If nobody else has a clean suggestion on styling the wrapper div, I
would suggest opening a new item in the issue tracker requesting a CSS
class name be added to it.

On 8/24/07, joster <joste...@gmail.com> wrote:
>

[Strindberg]

Can somebody please comment on how to actually get the SuggestBoxPopup
to scroll automatically when you navigate down with the selection with
the arrow keys.

I copied the josters styles. But it doesn't solve it. The highlight
that indicates selected item in the suggest popup goes down out of
the frame, and the scrollbar doesnt move. Naturally I want it to
follow the selection according to normal behavior in any application.

Thanks in advance.

[pmonestie]

I got the exact same problem. Given that the class is final it's also
kinda difficult to fix it...
Thanks in advance

On Sep 29, 2:24 pm, Strindberg <strindb...@gmail.com> wrote:
> Can somebody please comment on how to actually get the SuggestBoxPopup

> toscrollautomatically when you navigate down with the selection with

> the arrow keys.
>
> I copied the josters styles. But it doesn't solve it. The highlight
> that indicates selected item in the suggest popup goes down out of
> the frame, and the scrollbar doesnt move. Naturally I want it to
> follow the selection according to normal behavior in any application.
>
> Thanks in advance.
>
> On Aug 25, 1:25 am, joster <joster.j...@gmail.com> wrote:
>
> > Thanks.
>

> > OK, I think I figure out how to get thescrollgoing, but now I have

> > alignment issues if there are one or two suggestions displayed in the

> > popup ofSuggestBoxand the popup height is larger.

>
> > For example, let's say I only have one suggestion displayed in the
> > popup of SuggesBox, with the following CSS, the suggestion is shown in
> > the center of it. I would like it to be flushed to the top, how do I
> > do this?
>
> > Joster
>
> > .gwt-SuggestBoxPopup {
> > font-size: 83%;
> > font-weight: normal;
> > background-color: #ffffff;
> > border: solid 1px blue;
> > width: 250px;
> > height: 500px;
> > overflow:scroll;
> > vertical-align: top; /* VERTICAL ALIGNMENT SET, BUT THE TEXT
> > IS SHOWN ON THE CENTER OF THE POPUP, WHY? */
>
> > }
>
> > On Aug 24, 9:08 am, "Isaac Truett" <itru...@gmail.com> wrote:> If you're not familiar with using CSS, I would read up on that before
> > > going any further. There are plenty of good tutorials online. Building
> > > attractive user interfaces with GWT will be a lot easier once you have
> > > a working knowledge of CSS.
>
> > > On 8/24/07, joster <joster.j...@gmail.com> wrote:
>
> > > > Thanks. How do you set the CSS overflow property to make the
> > > > suggestion menuscroll?
>
> > > > Joster
>
> > > > On Aug 24, 4:34 am, "Isaac Truett" <itru...@gmail.com> wrote:

> > > > > You can do this without modifyingSuggestBox. Just use the CSS

[Yoni]

if I remember correctly, vertical-align only works on text, not on
block elements.
Try using max-height instead of height in your css file. Although, I
am not sure if it works properly in IE.

As for scrolling with the keyboard, perhaps you can use the
SuggestBox.addChangeListener method to give the selected item the
focus. It might cause the whole list to scroll down properly.

On Sep 29, 11:24 pm, Strindberg <strindb...@gmail.com> wrote:
> Can somebody please comment on how to actually get the SuggestBoxPopup
> to scroll automatically when you navigate down with the selection with
> the arrow keys.
>
> I copied the josters styles. But it doesn't solve it. The highlight
> that indicates selected item in the suggest popup goes down out of
> the frame, and the scrollbar doesnt move. Naturally I want it to
> follow the selection according to normal behavior in any application.
>
> Thanks in advance.
>
> On Aug 25, 1:25 am, joster <joster.j...@gmail.com> wrote:
>
> > Thanks.
>
> > OK, I think I figure out how to get the scroll going, but now I have
> > alignment issues if there are one or two suggestions displayed in the

> > popup ofSuggestBoxand the popup height is larger.

>
> > For example, let's say I only have one suggestion displayed in the
> > popup of SuggesBox, with the following CSS, the suggestion is shown in
> > the center of it. I would like it to be flushed to the top, how do I
> > do this?
>
> > Joster
>
> > .gwt-SuggestBoxPopup {
> > font-size: 83%;
> > font-weight: normal;
> > background-color: #ffffff;
> > border: solid 1px blue;
> > width: 250px;
> > height: 500px;
> > overflow: scroll;
> > vertical-align: top; /* VERTICAL ALIGNMENT SET, BUT THE TEXT
> > IS SHOWN ON THE CENTER OF THE POPUP, WHY? */
>
> > }
>
> > On Aug 24, 9:08 am, "Isaac Truett" <itru...@gmail.com> wrote:> If you're not familiar with using CSS, I would read up on that before
> > > going any further. There are plenty of good tutorials online. Building
> > > attractive user interfaces with GWT will be a lot easier once you have
> > > a working knowledge of CSS.
>
> > > On 8/24/07, joster <joster.j...@gmail.com> wrote:
>
> > > > Thanks. How do you set the CSS overflow property to make the
> > > > suggestion menu scroll?
>
> > > > Joster
>
> > > > On Aug 24, 4:34 am, "Isaac Truett" <itru...@gmail.com> wrote:

> > > > > You can do this without modifyingSuggestBox. Just use the CSS

[Mike]

Hi Strindberg,

I solved that problem by
- placing the suggestion menu on a scrollpanel
scrollPanel = new ScrollPanel(suggestionMenu);
- calling ensureVisible after an arrow-key-press
scrollPanel.ensureVisible(suggestionMenu.getSelectedItem());

(See below for more code.)

This works fine, but it requires adjustments in the suggestbox code.
Since suggestbox is final and therefore cannot be subclassed, you must
copy all suggestbox classes to your local project.

Bye

Mike

--------------------------------------------------------------

private class SuggestionPopup extends PopupPanel {

private static final String STYLENAME_DEFAULT = "gwt-
SuggestBoxPopup";
private final ScrollPanel scrollPanel;

public SuggestionPopup() {
super(true);

scrollPanel = new ScrollPanel(suggestionMenu);
scrollPanel.setHeight("200px");
setWidget(scrollPanel);
setStyleName(STYLENAME_DEFAULT);
}
... etc

-----------------------------------------------------------------

public void onKeyDown(Widget sender, char keyCode, int modifiers) {
// Make sure that the menu is actually showing. These keystrokes
// are only relevant when choosing a suggestion.
if (suggestionPopup.isAttached()) {
switch (keyCode) {
case KeyboardListener.KEY_DOWN:
suggestionMenu.selectItem(suggestionMenu.getSelectedItemIndex()
+ 1);

suggestionPopup.scrollPanel.ensureVisible(suggestionMenu.getSelectedItem());

etcetera

-------------------------------------------