2010-12-13 8 views
6

¿Alguien sabe cómo:Adición de desplazamiento para GWT SuggestBox

1) Añadir un desplazamiento a la ventana emergente creada por la SuggestBox?

2) ¿Cómo personalizar el aspecto (CSS) de la SuggestBox de manera eficiente?

Quiero hacer los cambios anteriores sin tocar la implementación real tanto como sea posible. También esta solución debería ser compatible (IE7-IE8, FF, Chrome).

Gracias.

Respuesta

11

Use Firebug addon para Firefox (o IE/Chrome depurador) para inspeccionar el elemento que necesita para modificar su estilo y ver si GWT le ha asignado un nombre de clase de estilo [o leer su JavaDoc]. Aquí en su caso es gwt-SuggestBoxPopup para el elemento externo y muchos otros nombres de clase de estilo para elementos internos como suggestPopupMiddle, suggestPopupMiddleCenterInner y suggestPopupContent. Use estos nombres de clase para modificar el estilo de los componentes.

Para agregar desplazamiento vertical (horizontal), necesita especificar altura (ancho) o altura máxima y usar desbordamiento-y: desplazamiento; (overflow-x: scroll;) o desbordamiento: scroll; Use auto en lugar de desplazamiento para ocultar la barra scoll cuando no sea necesario.

Así que su respuesta corta es:

.suggestPopupContent{ 
    height: 100px;  
    overflow-y: scroll; 
} 
+0

Utilicé el truco de CSS para agregar una barra de desplazamiento en mi ventana emergente de sugerencias, funciona, pero hay un error: si utiliza las teclas de flecha para navegar por las opciones, ¡el desplazamiento no sigue! No sé cómo cambiar eso. –

+0

@MaximeARNSTAMM No estoy seguro, pero es posible que pueda utilizar onfocus y algunas líneas de código para desplazarse en la opción enfocada. –

+0

@MaximeARNSTAMM vea la respuesta http://stackoverflow.com/a/24235088/1357094: Utilizará el mismo CSS que esta respuesta, junto con una extensión SuggestBox relativamente simple (en lugar de piratear en SuggestBox como muchas otras respuestas)) – cellepo

-1

2)

nueva SuggestBox() setStyleName (/ * su estilo aquí * /);.

+0

Esto no afecta el panel de sugerencias (la ventana emergente real) – l3dx

Cuestiones relacionadas