OH3 Überlappung bei Layout Pages

[Mr. BJ]

Hallo zusammen,

weiß jemand wie man in einer Layout Page Überlappungen mit CSS (Style, z-index) hinbekommt?

Wie auf dem Screenshot sieht ist das Heizungselement so groß das die nächste Reihe nach unten verschoben wird. Die Idee war mit z-index zu arbeiten, Beispiel:
Wohnwand TV-Bank z-index: 10
Deckenlampe z-index: 10
Heizung z-index: 10
Wohnwand z-index: 20
Spot z-index: 30
Vitrine z-index: 40
Funktioniert leider nicht so wie Gedacht, für einen Tipp oder Hilfe wäre ich sehr dankbar.

[Mr. BJ]

In deropenHAB 3 Doku habe ich folgendes Bild als Beispiel gefunden wo das Layout so dargestellt wird wie ich es gerne möchte:

Laut dem Text braucht man nach dem letzten Block eine Masonry hinzufügen und dann soll es automatisch anpassen aber bei mir passiert da gar nichts.
Hat das jemand schon einmal ausprobiert?

[Bubbleman]

Hi

Ich kann es nur Laienhaft ausdrücken:
In der oberen Hälfte kannst du die Widgets anhan eines Rasters arrangieren (Reihen Spalten)
In der unteren Hälfte funktioniert das nach dem "Masorny Prinzip". Wenn du dort Widgets anlegst rutschen die je nach Bildschirmgröße/Format an einen neuen Platz.
Du muss also kein "Masornyelement" hinzufügen, sondern deine Widgets in der unteren Hälfte einbauen/konfigurieren.

Gruß
Thomas

[Mr. BJ]

Hi Thomas,

gut...bei mir funktioniert beides nicht. Nicht auf einem Tablet und auch nicht auf einem 27" iMac.
Das ist bei mir gerade so ein Verständnisproblem, da es eigentlich funktionieren sollte...glaube ich.

Hier ist mein Code (wie gesagt mit oder ohne masonry habe ich das gleiche Problem):

Code: Alles auswählen

config:
  label: Wohnzimmer
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          slots:
            default:
              - component: oh-grid-col
                slots:
                  default:
                    - component: widget:Light Control
                      config:
                        item_power: LeuchteTVBankPower
                        item_dimmer: LeuchteTVBankDimmer
                        item_color: LeuchteTVBankFarbe
                        item_colorTemp: LeuchteTVBankFarbtemperatur
                        title: Wohnwand TV-Bank
              - component: oh-grid-col
                slots:
                  default:
                    - component: widget:Light Control
                      config:
                        title: Deckenlampe
                        item_power: WohnzimmerDeckenlampePower
                        item_dimmer: WohnzimmerDeckenlampeDimmer
                        item_color: WohnzimmerDeckenlampeFarbe
                        item_colorTemp: WohnzimmerDeckenlampeFarbtemperatur
              - component: oh-grid-col
                slots:
                  default: []
              - component: oh-grid-col
                slots:
                  default:
                    - component: widget:Homematic Thermostat
                      config:
                        title: Heizung
                        item_current_temp: WandthermostatWohnzimmerAktuelleTemparatur
                        item_target_temp: WandthermostatWohnzimmerSolltemparatur
                        item_humidity: WandthermostatWohnzimmerLuftfeuchtigkeit
                        optimalHumidityMin: "25"
                        optimalHumidityMax: "60"
                        titleOperatingMode: Betriebsmodus
                        item_operating_mode: WandthermostatWohnzimmerModus
                        autoMode: Automatik
                        manualMode: Manuell
                        item_current_weeklyprofile: WandthermostatWohnzimmerWochenprofil
                        windowStateOpen: Offen
                        windowStateClosed: Zu
                        windowStateTiled: Kippe
                        titleWeeklyProfile: Wochenprofil
                        weeklyProfile1: Standard
                        weeklyProfile2: Frühschicht
                        weeklyProfile3: Spätschicht
                        weeklyProfile4: "~"
                        weeklyProfile5: "~"
                        weeklyProfile6: Heizung aus
        - component: oh-grid-row
          slots:
            default:
              - component: oh-grid-col
                slots:
                  default:
                    - component: widget:Light Control
                      config:
                        title: Wohnwand Regal
              - component: oh-grid-col
                slots:
                  default: []
              - component: oh-grid-col
                slots:
                  default: []
              - component: oh-grid-col
                slots:
                  default: []
        - component: oh-grid-row
          slots:
            default:
              - component: oh-grid-col
                slots:
                  default:
                    - component: widget:Light Control
                      config:
                        title: Spot
              - component: oh-grid-col
                slots:
                  default: []
              - component: oh-grid-col
                slots:
                  default: []
              - component: oh-grid-col
                slots:
                  default: []
        - component: oh-grid-row
          slots:
            default:
              - component: oh-grid-col
                slots:
                  default:
                    - component: widget:Light Control
                      config:
                        title: Vitrine
                        item_power: WohnzimmerVitrinePower
              - component: oh-grid-col
                slots:
                  default: []
              - component: oh-grid-col
                slots:
                  default: []
              - component: oh-grid-col
                slots:
                  default: []
masonry:
  - component: oh-masonry
    slots:
      default: []