Seite 1 von 1
OH3 Überlappung bei Layout Pages
Verfasst: 8. Apr 2021 09:28
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.
Re: OH3 Überlappung bei Layout Pages
Verfasst: 12. Apr 2021 23:27
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:
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?
Re: OH3 Überlappung bei Layout Pages
Verfasst: 13. Apr 2021 19:53
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
Re: OH3 Überlappung bei Layout Pages
Verfasst: 13. Apr 2021 20:39
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: []