2012-03-02 1 views
0

Existe-t-il un moyen de mettre en œuvre le défilement horizontal dans un panneau horizontal?GWT Panneau horizontal avec défilement horizontal

ou tout autre panneau peut être utilisé pour obtenir la fonctionnalité mentionnée ci-dessous -

L'exigence est que je suis en train de créer une barre de recherche où les articles de recherche sont ajoutés au fur et à entrées utilisateur les (quelque chose de semblable à ce - http://documentcloud.github.com/visualsearch/) Eh bien j'ai eu la fonctionnalité de travail et même les regards sont similaires, mais luttant sur le panneau horizontal. J'utilise un panneau horizontal comme une barre de recherche et il a une boîte de suggestion incorporée dedans. Ainsi, lorsque l'utilisateur saisit des données, les éléments de recherche sont ajoutés au panneau horizontal. mais au fur et à mesure que les éléments de recherche sont ajoutés, le panneau horizontal grossit et sort de l'écran et la barre de défilement horizontale du navigateur apparaît. Mais je voulais une barre de défilement sur le panneau horizontal lui-même. Est-ce que cela peut être réalisé? veulent des idées ... toute aide est appréciée. Merci.

Répondre

2

Vous pouvez utiliser l'attribut css overflow-x. Si vous voulez qu'il défile, définissez la valeur pour faire défiler ou auto. Si vous devez contraindre la taille de la div de manière spécifique, vous devrez peut-être la contrôler de manière progamique.

+0

J'ai essayé ceci .. mais malheureusement n'a pas fonctionné initialement parce que les panneaux horizontaux de GWT sont rendus en tant que tables en HTML. Par conséquent, j'ai pensé que je pourrais utiliser un autre panneau d'emballage qui sera rendu comme un tag DIV. D'où l'a enveloppé en utilisant un simple panelel et utilisé votre changement CSS suggéré. Ça marche !!!!! – ravi

1

Je ne vois pas d'autre solution que de placer votre HorizontalPanel à l'intérieur un panneau de défilement. Ensuite, je voudrais ajouter une propriété CSS pour empêcher l'affichage de la barre de défilement verticale.

Voici un extrait de ui.xml:

<ui:style> 
    .scrollHorizontal{ 
     overflow-y: hidden !important; 
     /* !important used to force override the style "overflow:scroll" 
      of the ScrollPanel */ 
    } 
</ui:style> 

<g:ScrollPanel addStyleNames="scrollHorizontal"> 
    <g:HorizontalPanel ui:field="resultsPanel" /> 
</g:ScrollPanel> 

Vous devrez peut-être vérifier la hauteur du client de votre panneau de défilement de manière à régler la hauteur des éléments à l'intérieur du panneau horizontal, en fonction de votre mise en page.

+0

Oups, désolé, je n'ai pas vu votre commentaire ci-dessus. –

Questions connexes