Comment styliser un panneau séparateur horizontal dans GWT 1.5

J'ai cette exigence pour styler un côté droit d'un panneau séparateur horizontal. D'après ce que je sais, GWT 1.7 prend en charge les styles de panneaux individuels (gauche et droite), mais nous utilisons GWT 1.5 ici.Comment styliser un panneau séparateur horizontal dans GWT 1.5

Code GWT:

HTML div1 = new HTML("Div 1"); 
div1.setWidth("200px"); 
div1.setHeight("200px"); 
HTML div2 = new HTML("Div 2"); 
div2.setWidth("400px"); 
div2.setHeight("500px"); 

HorizontalSplitPanel horizontalSPanel = new HorizontalSplitPanel(); 
horizontalSPanel.setLeftWidget(div1); 
horizontalSPanel.setRightWidget(div2); 

RootPanel.get().add(horizontalSPanel);

sortie correspondante:

<div class="gwt-HorizontalSplitPanel" style="position: relative; height: 100%;"> 
    <div style="border: medium none ; margin: 0pt; padding: 0pt; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"> 
     <div style="border: medium none ; margin: 0pt; padding: 0pt; overflow: auto; position: absolute; top: 0px; bottom: 0px; width: 511px;"> 
      <div class="gwt-HTML" style="width: 200px; height: 200px;">Div 1</div> 
     </div> 
     <div style="position: absolute; top: 0px; bottom: 0px; left: 511px;"> 
      <table height="100%" cellspacing="0" cellpadding="0" class="hsplitter"> 
      <tbody> 
       <tr><td valign="middle" align="center"> 
        <img border="0" style="background: transparent url(http://localhost:8888/com.xyzpackage.MyEntryPoint/4BF90CCB5E6B04D22EF1776E8EBF09F8.cache.png) no-repeat scroll 0px 0px; width: 7px; height: 7px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" src="http://localhost:8888/com.xyzpackage.MyEntryPoint/clear.cache.gif"/> 
       </td></tr> 
      </tbody> 
      </table> 
     </div> 
     <div style="border: medium none ; margin: 0pt; padding: 0pt; overflow: auto; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 518px;"> 
      <div class="gwt-HTML" style="width: 400px; height: 500px;">Div 2</div> 
     </div> 
    </div> 
</div>

est-il un moyen où je peux appliquer un style qu'à la div RHS?

En gros, j'ai une exigence qui ne permet pas à ma demande d'avoir une barre de défilement verticale dans la vue RHS.

Source

2010-01-11 Salvin Francis

GWT 2.0 est sorti. Je conseillerais de mettre à jour. – cletus

:) ce n'est pas mon appel, notre application est énorme. –

En fait, mon exigence est Wierd, il y a un élément dans RHS qui devrait être "toujours au top", c'est-à-dire que les éléments restants devraient être scrollables. Cependant, notre exigence ne permet pas non plus de double barre de défilement. –

a dû recourir à DOM:

   Node node = horizontalSPanel.getElement().getFirstChildElement().getChildNodes().getItem(2); 
       // set the overflow y to hidden, this is in point of view of GWT current version 
       // does not allow user to set style to right or left containers. 
       DOM.setStyleAttribute((Element) node, "overflowY", "hidden");

Ceci est très boiteux et utilise le codage en dur

Toute personne ayant une meilleure solution ??

Source

2010-01-11 09:50:52

Vous pouvez toujours placer la Div 2 dans une autre Div et lui donner l'attribut overflowY: hidden, vous n'avez donc pas besoin de passer par l'arborescence DOM.

La même approche est utilisée dans ScrollPanel uniquement pour la raison inverse.

Source

2010-01-12 11:39:17

Le problème est les barres de défilement, voir ceci "Barres de défilement à l'intérieur ou à l'extérieur de la boîte?" dans cette page http://css-tricks.com/the-css-overflow-property/ un navigateur le compte, un autre ne le fait pas, donc le réglage de 100% de la largeur et de la hauteur a un comportement différent et firefox affiche deux barres de défilement. –

encore, +1 pour l'idée –

Comment styliser un panneau séparateur horizontal dans GWT 1.5

Répondre

Questions connexes