Information & Consulting

Mit dem »LiveGrid« von Rico steht eine hübsche interaktive Tabelle zur Verfügung. Mit Hilfe von Drag-and-Drop kann der Nutzer die Breite von Spalten justieren und auch die Breite der gesamten Tabelle. Das setzt allerdings voraus, daß das umliegende Element ausreichend groß dimensioniert ist.

In einem speziellen Fall besteht die Seite aus einem »LiveGrid« links und einem Formular rechts, technisch gesehen aus zwei Spalten einer umliegenden Tabelle. Wenn die Breite der Spalten dem Browser überlassen wird, entsteht ungenutzter Raum zwischen dem rechten Rand des »LiveGrid« und dem rechten Rand der linken Layout-Spalte.

   <table width=100%>
   <tr>
   <td>
   <table id="LiveGrid" class="ricoLiveGrid" cellspacing="0" cellpadding="0">
   <tr>
     <th>Nr</th><th>Status</th><th>Order</th><th>Priority</th><th>Date</th><th>Note</th>
   </tr>
   </table>
   </td>
   <td>rechte Spalte</td>
   </tr>
   </table>

Unerfreulicherweise nutzt das »LiveGrid« in diesem Fall nicht den zur Verfügung stehenden Platz sondern aktiviert den horizontalen Rollbalken. Das sieht im Ergebnis relativ unpraktisch aus, denn in manchen Fällen würde der Platz zwischen dem rechten Rand des »LiveGrid« und dem rechten Rand der linken Layout-Spalte ausreichen, um den Rest der Tabelle komplett darzustellen. So könnte sogar auf den Scrollbar verzichtet werden.

Zieht man die Tabelle breiter, wird sie auch breiter, allerdings bleibt der Rollbalken bestehen und ebenfalls der Abstand zwischen den beiden Rändern. Zieht man die Tabelle kleiner, vergrößert sich dieser Abstand natürlich.

Wird die Breite der linken Spalte z.B. auf 50% festgelegt, nimmt das »LiveGrid« erst nach manuellem Resize die Breite der gesamten Spalte ein, wenn der gesamte Platz nicht für die Darstellung der Grid-Spalten benötigt wird. Ist das beim ersten Laden nicht der Fall, entsteht ein Freiraum zwischen Tabelle und der Mitte der Seite.

Allerdings ist es jetzt unmöglich, die Tabelle zu verbreitern, denn die Dimension des umliegenden Elements, namentlich der Hauptspalte, dessen Breite auf 50% der Breite des Browsers festgelegt wurde, bestimmt die maximale Breite des »LiveGrid«. Wird die Tabelle kleiner gezogen, entsteht wieder der Freiraum.

Unter'm Strich ist es also für das Layout wenig zielführend, die Berechnung Breite der globalen Spalten dem Browser zu überlassen. Ebenfalls ungünstig erweist es sich allerdings, wenn man feste Breiten vergibt, dem Nutzer jedoch eigentlich die Möglichkeit zum Resize einräumen möchte.

Ich habe mir daraufhin die Berechnung innerhalb des Rico-Frameworks intensiv zu Gemüte geführt und nach einiger Zeit auch die Knoten entwirrt. Für diesen evtl. speziellen Fall nimmt Rico zuviel Rücksicht auf die Größe des umliegenden Elements. Dadurch wird der Platz nicht optimal genutzt.

Um das Problem zu lösen, habe ich dem umliegenden Element, in diesem Fall ein »<td>«, ein zusätzliches Attribut »autoresize« spendiert, das von Rico ausgewertet wird und die Breite des Elements bei Bedarf justiert. Mit diesem Patch wird dadurch der für das »LiveGrid« vorgesehene Platz optimal genutzt und der Anwender hat die Möglichkeit, die Tabelle - fast - nach Belieben breiter und schmaler zu ziehen.

   <table width=100%>
   <tr>
   <td autoresize="1">
     LiveGrid
   </td>
   <td>rechte Spalte</td>
   </tr>
   </table>

Die maximale Breite des »LiveGrid« wird jetzt ausschließlich durch die Breite des Browserfensters limitiert.

Wer mehr Rücksicht auf die umliegenden Elemente nehmen möchte, z.B. die rechte Tabellenspalte immer 30% des Browserfensters einnehmen lassen möchte, nimmt lieber den zweiten Patch, der ein weiteres Attribut »maxwidth« unterstützt.