MyFaces PanelTab Komponente: Tabs in mehrern Zeilen möglich?

[Georg_ä]

Schön guten Abend,

ich versuche gerade in Java dynamisch ein Formular u.a. mit HtmlPanelTab Komponenten zu erzeugen. Siehe Beispiel. Das Problem, dass ich nun habe, ist, dass bei einer großen Anzahl von Tabs diese aus dem Rahmen laufen, heißt das letzte Tab ist nur teilweise sichtbar und der Text wird abgeschnitten. Ich möchte aber, dass die Tabs umgebrochen werden in eine neue Zeile. Hab schon mit verschiedenen css Geschichten rumgespielt, aber nichts hat den gewünschten Effekt gebracht. Hat jemand eine Idee wie man das machen kann. Ist es überhuapt möglich und welche Alternativen gäbe es ? (Tabs sollen es auf jedne Fall sein, swohl die Tabs, als auch der einzelne Inhalt (Tabellen) in den Tabs können sehr groß und vielzählig sein)

public void createPanelTab(String labeltext){
  HtmlPanelTab result = new HtmlPanelTab();
  result.setLabel(labeltext);
  return result;
}

for (Formularelement element : allFormulaElements) {
   switch (element.getType()) {
        case ELEMENT_TAB: {
              element = createPanelTab(element.getText());
              break;
        }
   }
}

 

[Guest]

Hier mal ein Beispiel wie das gerendert wird:

<t:div id="bla" style="width:400px">
<t:paneltabbedpane>

   <t:panelTab label="Tab1">
       <t:panelGrid columns="2">
             <h:outputText value="..">
             <h:outputText value="..">
       </t:panelGrid>
   </t:panelTab>


   <t:panelTab label="Tab2">
       <t:panelGrid columns="2">
             <h:outputText value="..">
             <h:outputText value="..">
       </t:panelGrid>
   </t:panelTab>


   <t:panelTab label="Tab3">
       <t:panelGrid columns="2">
             <h:outputText value="..">
             <h:outputText value="..">
       </t:panelGrid>
   </t:panelTab>


</t:paneltabbedpane
</t:div>

Wie müssen die styles hier gesetzt werden, dass die Tabs automatisch in die nächste zeile genommen werden, wenn die Anzahl die Breite von 400px überschreitet:

 |Tab 1|   |Tab 2|   |Tab 3|   |Tab 4|
 |Tab n|

 

[Guest]

ihr seid gemein.

nach ungefähr einem jahr bin ich der sache nun etwas näher:

das problem ist, das jedes tab in einer eigenen zelle gerendert wird (durch ein input field vom typ button):

<table class = "myfacespaneltabbedpane">
  <tr class="myfacestablerow">
    <td>input type="button" val="Tab 1" onclick="..."></td>
    <td>input type="button" val="Tab 2" onclick="..."></td>
    <td>input type="button" val="Tab 3" onclick="..."></td>
    <td>input type="button" val="Tab 4" onclick="..."></td>
    <td>input type="button" val="Tab 5" onclick="..."></td>
  </tr>
</table>

wäre das nun, so dass die tabs in einer einzigen zelle gerendert würden

<table class = "myfacespaneltabbedpane" style="width:50%;">
  <tr class="myfacestablerow">
    <td style="white-space:normal;">input type="button" val="Tab 1" onclick="...">
           input type="button" val="Tab 2" onclick="...">
           input type="button" val="Tab 3" onclick="...">
           input type="button" val="Tab 4" onclick="...">
           input type="button" val="Tab 5" onclick="...">
   </td>
  </tr>
</table>

dann würde da mit dem Umbruch der Tabs wunderbar klappen. Hat nun jemand eine Idee, wie ich dem beikommen könnte. Wie greife ich generell von java aus auf html tags zu, wenn ich die komponente dynamisch erzeuge ?
MfG

 

[Guest]

ach ja mit einem "overflow:auto" um das gesamte Konstrukt habe ich immerhin die Möglichkeit, horizontal zu scrollen. Das ist aber doof.