Formatierung erster Spalte

[choetzu]

Hallo

Ich habe vermutlich im falschen Thema (https://forum.fhem.de/index.php/topic,101749.msg1004555.html#msg1004555)  meine Problemstellung gepostet, deshalb versuche ich es hier nochmals.

Wie kann ich die erste Spaltenbreite fix formatieren? Das will ich dann bei allen rg so machen, damit bei der Darstellung auf Mobile die RG schön gleich aussehen.

ValueStyle macht ja nur die Spalte des Wertes, nicht aber die erste Spalte, so wie ich das verstanden habe.

Danke

Lg c

[choetzu]

Übrigens: ich habe im Wiki https://wiki.fhem.de/wiki/ReadingsGroup den vielversprechenden Eintrag beim css-Anpassen gefunden. Doch leider klappt es nicht, wenn ich

Code Auswählen Erweitern

table.rgDevices tr td:first-child{  /* 1. Spalte */ width: 145px; text-align: center; }

mache..

[OdfFhem]

Das style-Attribut der readingsGroup hast Du entsprechend gesetzt?

Vielleicht kannst Du ein list bereitstellen ...

[choetzu]

Hallo OdfFhem

danke für deine Antwort. Nein, im style Attribut habe ich nix gemacht, da ich dachte, dass man nur die erste Spalte durch eine Anpassung im CSS erreichen kann. Offensichtlich ein Denkfehler.

Hier das Listing einer readingsGroup. Hilft dir das weiter?

Code Auswählen Erweitern

Internals:
   DEF        Whirlpool:temperature
Whirlpool:PH
Whirlpool:Redox

   FUUID      5d9a5195-f33f-8001-3051-7bf80f5d255174b6
   NAME       Whirlpool_rg
   NR         654
   NTFY_ORDER 50-Whirlpool_rg
   STATE      Initialized
   TYPE       readingsGroup
   mayBeVisible 1
   CONTENT:
     Whirlpool  1
   CONTENT2:
   DEVICES:
     ARRAY(0x56e2db0)
     ARRAY(0x56f84a8)
     ARRAY(0x56d1c60)
   fhem:
     lastDefChange 1
     last_update 1577174365.3504
   helper:
     DEF       
     mapping:
       PH         pH
       Redox      Redox
       temperature Temp
     positions:
       Whirlpool.PH 2:1
       Whirlpool.Redox 3:1
       Whirlpool.temperature 1:1
     valueFormat:
       PH         %.1f pH
       Redox      %.1f mv
       temperature %.1f°C
     values:
       formated:
         undef
         ARRAY(0x5ab8b58)
       orig:
         undef
         ARRAY(0x5f28fa8)
       prefixsuffix:
         undef
         ARRAY(0x5787de0)
Attributes:
   alias      Whirlpool
   mapping    {'PH' => 'pH', 'temperature' => 'Temp', 'Redox' => 'Redox'}
   room       01_Status
   sortby     2
   valueFormat { temperature => "%.1f°C", Redox => "%.1f mv", PH => "%.1f pH"}

[OdfFhem]

Die css-Anpassung rgDevices kann nur funktionieren, wenn das style-Attribut (nicht valueStyle) der readingsGroup entsprechend gesetzt wird. Hat natürlich direkt zur Folge, dass in jeder readingsGroup dieses Attribut zu setzen wäre.

Es gibt aber zum Glück auch eine bereits automatisch zugewiesene Klasse namens readingsGroup, so dass eine css-Anpassung reicht und sofort Auswirkung zeigt.

Folgendes sorgt für eine 150px breite, erste Spalte. Aber nur, solange der Inhalt auch in 150px passt; ansonsten wird die Spalte trotzdem breiter.

Code Auswählen Erweitern

table.readingsGroup tr td:first-child{ width:150px; text-align:left; }

[choetzu]

Super, das hat geholfen und sieht nun sehr gut aus --> Danke für die Hilfe.. Ich war ja schonmal auf der richtigen Spur

Folgendes sorgt für eine 150px breite, erste Spalte. Aber nur, solange der Inhalt auch in 150px passt; ansonsten wird die Spalte trotzdem breiter.

Code Auswählen Erweitern

table.readingsGroup tr td:first-child{ width:150px; text-align:left; }

toll wäre, wenn sich die fixe Spaltenbreite NICHT anpassen würde, wenn der Inhalt grösser wird. Sprich ein Tuncate wäre mir lieber, also der Text abgeschnitten wird (...) wenn er zu lang wird (Analog Tablet Ui). Ist dies wohl möglich oder nicht?

[xenos1984]

Hilft das weiter?

Code Auswählen Erweitern

table.readingsGroup { table-layout:fixed; }
table.readingsGroup tr td:first-child{ overflow:hidden; white-space:nowrap; width:150px; text-align:left; }

[OdfFhem]

Hilft das weiter?

Lösung funktioniert natürlich. Hat meiner Ansicht nach aber den Nachteil, dass das Layout der Tabelle unflexibel wird. Dies wirkt sich dahingehend aus, dass die Spaltenbreite nicht mehr vom Inhalt gesteuert wird, sondern alle (nicht größenregulierten) Spalten die gleiche Breite haben (s. unteren Teil vom Screenshot).

Damit das Layout der Tabelle weiterhin vom Spalteninhalt abhängig ist, würde ich möglichst nur die erste Spalte regulieren. Folgende css-Anpassung liefert das gewünschte Ergebnis (s. oberen Teil vom Screenshot). Ob dies in allen Browsern funktioniert, kann man ja nie so genau vorhersagen ... Firefox und Chrome sind aber schon mal zufrieden.

Code Auswählen Erweitern


table.readingsGroup tr td:first-child{ width:150px; max-width:150px; text-align:left; overflow:hidden; }


[choetzu]

danke xenos1984 und OdfFhem

Die Variante von xenos1984 funktioniert bei mir auf dem iPhone 8/Safari bestens. Die Variante von OdfFhem wäre mir aus erwähntem Grunde (nur erste Spalte fix) aber lieber, funktioniert aber nicht, auch nicht auf Chrome / Mac. Siehe Bild.

Woran könnte das liegen?

[OdfFhem]

Das wäre ja schade, wenn es in der Apfelwelt nicht funktioniert ...

Ich habe Chrome unter Ubuntu, Windows und auch Android getestet - funktioniert einwandfrei. Da ich keine Produkte aus der Apfelwelt einsetze, kann ich zur Lösung vermutlich nur wenig bzw. gar nichts beitragen.

Beim Betrachten des angehängten Bildschirmfotos fällt mir allerdings auf, dass die Spaltendarstellung gar nicht inhaltgesteuert/platzoptimiert wie in meinem oberen Screenshot-Teil erscheint - irgendwie ist die Tabelle ja scheinbar immer auf 100% Breite aufgeblasen. Welche css-Anpassung genau hast Du denn jetzt angewendet?

[choetzu]

Welche css-Anpassung genau hast Du denn jetzt angewendet?

danke für deine Antwort. Bei der Darstellung handelt es sich um deine CSS-Anpassung.  Ich benutze den "neuen" Flex-Style (https://forum.fhem.de/index.php/topic,101749.0.html) und habe dort deine Ergänzung (table.readingsGroup tr td:first-child{ width:150px; max-width:150px; text-align:left; overflow:hidden; }) unter "Zusätzlicher CSS Code" ergänzt. Kann das die Ursache sein?

[OdfFhem]

Ich nutze den f18-Style; vom Flex-Style habe ich zwar schon mal gehört/gelesen, aber bislang nicht eingesetzt.

Da ich das zusätzliche Repository nicht integriert habe, kann ich den Flex-Style auch nicht testen.

Ich bin mir nicht sicher, ob man ohne Einstellungsverluste zwischen den Styles wechseln kann. Ansonsten wäre es am einfachsten, wenn Du bei Dir mal den f18-Style mit den css-Anpassungen testest und das Verhalten in der Apfelwelt beobachtest.

Als weitere Möglichkeit sehe ich natürlich noch, die Flex-Experten zu involvieren ...

[choetzu]

Guten Abend,

ich komme auf das Thema zurück. Ich habe im CSS folgendes eingetragen:

Code Auswählen Erweitern

table.readingsGroup { table-layout:fixed; }
table.readingsGroup tr td:first-child{ overflow:hidden; white-space:nowrap; width:50px; text-align:left; }
table.readingsGroup tr td:nth-child(2){ overflow:hidden; white-space:nowrap; width:145px; text-align:left; }
table.readingsGroup tr td:nth-child(3){ overflow:hidden; white-space:nowrap; width:145px; text-align:left; }

Das funktioniert gut. Was muss ich aber machen, wenn ich den selben Effekt nur auf einzelnen RG haben möchte und nicht auf allen. Wenn ich die Zeilen aus dem CSS lösche und dann mit attr cellStyle mit width= ({'c:1' => 'style="width:50px"'}) arbeite, geht es nicht. Es fixiert zwar die cell, nicht aber td...

Weiss hier jemand rat? Danke.

lg c

[OdfFhem]

@choetzu

Statt auf den Namen der css-Klasse zurückzugreifen, kannst Du für diesen Fall die id der Readingsgroup verwenden.

Meine Test-Readingsgroup heisst rg_presence; mit dieser css-Definition wird dann nur diese angepasst:

Code Auswählen Erweitern


#readingsGroup-rg_presence { table-layout:fixed; }
#readingsGroup-rg_presence tr td:first-child{ overflow:hidden; white-space:nowrap; width:50px; text-align:left; }
#readingsGroup-rg_presence tr td:nth-child(2){ overflow:hidden; white-space:nowrap; width:145px; text-align:left; }
#readingsGroup-rg_presence tr td:nth-child(3){ overflow:hidden; white-space:nowrap; width:145px; text-align:left; }


[choetzu]

wow, das ist ja genial!! Funktioniert bestens... Ganz herzlichen Dank für deine Unterstützung..

Einziger Wehrmutstropfen, dass man dies via css zentral machen muss und nicht als Attribut pro rg..  Wäre sowas theoretisch denkbar?