OH3 Überlappung bei Layout Pages

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
Mr. BJ
Beiträge: 59
Registriert: 27. Sep 2017 08:04

OH3 Überlappung bei Layout Pages

Beitrag von 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.

Bild
Gruß Björn


Pi3 openHAB 2.5, debMatic;
Pi4 openHAB 3;
Philips Hue Bridge; amazon echo

Mr. BJ
Beiträge: 59
Registriert: 27. Sep 2017 08:04

Re: OH3 Überlappung bei Layout Pages

Beitrag von 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:
Bild
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?
Gruß Björn


Pi3 openHAB 2.5, debMatic;
Pi4 openHAB 3;
Philips Hue Bridge; amazon echo

Bubbleman
Beiträge: 60
Registriert: 22. Dez 2020 17:03

Re: OH3 Überlappung bei Layout Pages

Beitrag von 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
Beiträge: 59
Registriert: 27. Sep 2017 08:04

Re: OH3 Überlappung bei Layout Pages

Beitrag von 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: []
Gruß Björn


Pi3 openHAB 2.5, debMatic;
Pi4 openHAB 3;
Philips Hue Bridge; amazon echo

Antworten