PopupView : showing tables of undefined size

Vaadin 6 / 7 / 8
1

Hi,

In our application we have search fields, following the pattern of Google’s “instant” search : you start typing in a textfield, and after a period of inactivity, the search results popup below the search field.

In Vaadin 6, we used the Overlays add-on to display the search results (in an Table of undefined size) relative to the textfield.

In Vaadin 7, the Overlays component is not available. The comparable V7 add-on is Henrik’s PopupExtension - but (probably due to an implementation “hack” whereby the table isn’t attached to the DOM until late), the sizing of the columns of the table is all wrong. I had a look, but it seems quite tricky to fix (I think it’s due to the “natural” sizing of the columns occuring very early on, before the component is displayed : see
this discussion
 for more details.

So, I’ve started working on a component heavily based on PopupView (for which read copied and modified not extended, due to private methods/variables on the client side) that will allow us to popup a component relative to any other component already displayed. (Sounds very like the Overlays component to me!)

It’s beginning to work quite nicely - however, I am coming across an issue with the sizing of the table (when table’s size is undefined), which then affects the sizing/positioning of the popup.

The same behaviour is exhibited by the standard PopupView.

If the “large” - i.e. component to be popped up - is a table of undefined size, the size reported by VPopupView#center() by popup#getOffsetWidth() & popup#getOffsetHeight() is not the same as the sizes reported by Web Inspectors in Chrome/FF - which then means that the component is not actually centered over the small/view component. For what it’s worth, I’m actually not that worried about the centering, but more the adjustment to ensure that the popup component appears on the screen (e.g. if left+width > windowRight, left = left-width and similarly for top/height) - but both will be affected by the same issue.

For illustration, In my example code the offsetWidth/offsetHeight of the popup containing the table (that is, the v-popupview-popup) is 291x344 in the Web Inspector/Firebug, yet in the VPopupView#center method it is reported as 221x364

I really want to avoid explicitly sizing the table, if I can possibly help it - I’d like it to take as much room as needed to show all of the columns at their natural width, and the given pageLength number of rows + header + footer. (Where possible, we want to avoid setting sizes on components)

Any idea of what is going on here? Is what I am trying to do possible?

Cheers,

Charles.

2

UPDATE : In case this helps anyone else, it turns out that the popup element is resized after it has been displayed (not sure how and where), hence the difference between the WebInspector and the code logging.

By adding (and, importantly, remembering to remove!) an ElementResizeListener (by LayoutManager#addElementResizeListener), I can reposition the popup based on the size of the popup whenever it occurs. I do this in the VPopupView#showPopup(CustomPopup) method - snippet appended.

This is (for my quick and dirty tests) more than sufficient. I guess that some kind of layout happens after the element is displayed - maybe in the browser itself - that changes the size of the component.

Cheers,

Charles.

@Override
public void showPopup(CustomPopup popup) {
  
  final Element popupElement = popup.getElement();

  /* If/When the element is resized, reposition the popup*/
  final ElementResizeListener listener = new ElementResizeListener() {
    @Override
    public void onElementResize(ElementResizeEvent e) {
      positionPopup();
    }
  };

  getLayoutManager().addElementResizeListener(popupElement, listener);

  /* When the popup is closed, remove the listener */
  popup.addCloseHandler(new CloseHandler<PopupPanel>() {
    @Override
    public void onClose(CloseEvent<PopupPanel> event) {
      getLayoutManager().removeElementResizeListener(popupElement, listener);
    }
  });
  
  super.showPopup(popup);
}
3

Thank you for sharing. I was just looking for this. Because I have a popup content that changes it size while the popup is visible and it shoves some buttons out of the screen.

4

Overlays for Vaadin 7: https://github.com/Haulmont/vaadin-overlays
https://github.com/Haulmont/vaadin-overlays/releases

5

Hi Charles
It’s been a while this topic has benn started. What’s the status of your “instant” search functionality in Google Style. I’d like to do the same :slight_smile:
Is your code open source or can you give me some hints in how I add the search result popup table to my search field?
Cheers
Stefan