Weiter zum Inhalt
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Hell
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dunkel
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [gelöst] vis.editor: eigene Widgets: style-top Angabe spielt verrückt

NEWS

  • Neues YouTube-Video: Visualisierung im Devices-Adapter
    BluefoxB
    Bluefox
    8
    1
    168

  • Neuer ioBroker-Blog online: Monatsrückblick März/April 2026
    BluefoxB
    Bluefox
    8
    1
    1.8k

  • Verwendung von KI bitte immer deutlich kennzeichnen
    HomoranH
    Homoran
    11
    1
    765

[gelöst] vis.editor: eigene Widgets: style-top Angabe spielt verrückt

Geplant Angeheftet Gesperrt Verschoben Visualisierung
2 Beiträge 1 Kommentatoren 408 Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • ? Offline
    ? Offline
    Ein ehemaliger Benutzer
    schrieb am zuletzt editiert von
    #1

    Hallo,

    ich versuche gerade mit Hilfe von eigenen Widgets eine Liste im Stil des Material-Designs zu bauen.

    Ein Widget soll dabei ein Listitem sein.

    (https://github.com/nisiode/ioBroker.vis-material)

    Ich habe jedoch noch eine merkwürdige Verhalten in der "top" Positionierung.

    Die Listitem sollen untereinander im Abstand von 56px erscheinen.

    Nach initialem Laden(Refresh/F5) sieht es total verschoben aus.

    So sieht es dann auch im vis direkt aus.
    2986_initial.png

    Nachdem man einzelne Widgets im Editor anklickt, positionieren sich die Widgets korrekt anhand der angegeben top Werte.
    2986_nach-klick.png

    Export des Views:

    {
      "settings": {
        "style": {
          "background_class": ""
        },
        "theme": "redmond",
        "sizex": "",
        "sizey": "",
        "gridSize": "8",
        "useAsDefault": false,
        "snapType": 2,
        "class": "",
        "useBackground": false
      },
      "widgets": {
        "e00001": {
          "tpl": "tplHtml",
          "data": {
            "g_fixed": true,
            "g_visibility": false,
            "g_css_font_text": false,
            "g_css_background": false,
            "g_css_shadow_padding": false,
            "g_css_border": false,
            "g_gestures": false,
            "g_signals": false,
            "visibility-cond": "==",
            "visibility-val": 1,
            "visibility-groups-action": "hide",
            "refreshInterval": "0",
            "signals-cond-0": "==",
            "signals-val-0": true,
            "signals-icon-0": "/vis/signals/lowbattery.png",
            "signals-icon-size-0": 0,
            "signals-blink-0": false,
            "signals-horz-0": 0,
            "signals-vert-0": 0,
            "signals-hide-edit-0": false,
            "signals-cond-1": "==",
            "signals-val-1": true,
            "signals-icon-1": "/vis/signals/lowbattery.png",
            "signals-icon-size-1": 0,
            "signals-blink-1": false,
            "signals-horz-1": 0,
            "signals-vert-1": 0,
            "signals-hide-edit-1": false,
            "signals-cond-2": "==",
            "signals-val-2": true,
            "signals-icon-2": "/vis/signals/lowbattery.png",
            "signals-icon-size-2": 0,
            "signals-blink-2": false,
            "signals-horz-2": 0,
            "signals-vert-2": 0,
            "signals-hide-edit-2": false,
            "class": "mdui-subtitle",
            "html": "Erdgeschoss",
            "lc-type": "last-change",
            "lc-is-interval": true,
            "lc-is-moment": false,
            "lc-format": "",
            "lc-position-vert": "top",
            "lc-position-horz": "right",
            "lc-offset-vert": 0,
            "lc-offset-horz": 0,
            "lc-font-size": "12px",
            "lc-font-family": "",
            "lc-font-style": "",
            "lc-bkg-color": "",
            "lc-color": "",
            "lc-border-width": "0",
            "lc-border-style": "",
            "lc-border-color": "",
            "lc-border-radius": 10,
            "lc-zindex": 0,
            "name": "EG"
          },
          "style": {
            "left": "16px",
            "top": "8px",
            "width": "auto",
            "height": "20px"
          },
          "widgetSet": "basic"
        },
        "e00002": {
          "tpl": "tplMaListDoor",
          "data": {
            "g_fixed": true,
            "g_visibility": false,
            "g_css_font_text": false,
            "g_css_background": false,
            "g_css_shadow_padding": false,
            "g_css_border": false,
            "g_gestures": false,
            "g_signals": false,
            "g_last_change": false,
            "visibility-cond": "==",
            "visibility-val": 1,
            "visibility-groups-action": "hide",
            "signals-cond-0": "==",
            "signals-val-0": true,
            "signals-icon-0": "/vis/signals/lowbattery.png",
            "signals-icon-size-0": 0,
            "signals-blink-0": false,
            "signals-horz-0": 0,
            "signals-vert-0": 0,
            "signals-hide-edit-0": false,
            "signals-cond-1": "==",
            "signals-val-1": true,
            "signals-icon-1": "/vis/signals/lowbattery.png",
            "signals-icon-size-1": 0,
            "signals-blink-1": false,
            "signals-horz-1": 0,
            "signals-vert-1": 0,
            "signals-hide-edit-1": false,
            "signals-cond-2": "==",
            "signals-val-2": true,
            "signals-icon-2": "/vis/signals/lowbattery.png",
            "signals-icon-size-2": 0,
            "signals-blink-2": false,
            "signals-horz-2": 0,
            "signals-vert-2": 0,
            "signals-hide-edit-2": false,
            "lc-type": "last-change",
            "lc-is-interval": true,
            "lc-is-moment": false,
            "lc-format": "",
            "lc-position-vert": "top",
            "lc-position-horz": "right",
            "lc-offset-vert": 0,
            "lc-offset-horz": 0,
            "lc-font-size": "12px",
            "lc-font-family": "",
            "lc-font-style": "",
            "lc-bkg-color": "",
            "lc-color": "",
            "lc-border-width": "0",
            "lc-border-style": "",
            "lc-border-color": "",
            "lc-border-radius": 10,
            "lc-zindex": 0,
            "oid": "javascript.0.wohnen.vi_door.garten.state",
            "title": "Wohnen",
            "subtitle": "Garten"
          },
          "style": {
            "left": "0px",
            "top": "56px",
            "position": ""
          },
          "widgetSet": "material"
        },
        "e00003": {
          "tpl": "tplMaListDoor",
          "data": {
            "g_fixed": false,
            "g_visibility": false,
            "g_css_font_text": false,
            "g_css_background": false,
            "g_css_shadow_padding": false,
            "g_css_border": false,
            "g_gestures": false,
            "g_signals": false,
            "g_last_change": false,
            "visibility-cond": "==",
            "visibility-val": 1,
            "visibility-groups-action": "hide",
            "signals-cond-0": "==",
            "signals-val-0": true,
            "signals-icon-0": "/vis/signals/lowbattery.png",
            "signals-icon-size-0": 0,
            "signals-blink-0": false,
            "signals-horz-0": 0,
            "signals-vert-0": 0,
            "signals-hide-edit-0": false,
            "signals-cond-1": "==",
            "signals-val-1": true,
            "signals-icon-1": "/vis/signals/lowbattery.png",
            "signals-icon-size-1": 0,
            "signals-blink-1": false,
            "signals-horz-1": 0,
            "signals-vert-1": 0,
            "signals-hide-edit-1": false,
            "signals-cond-2": "==",
            "signals-val-2": true,
            "signals-icon-2": "/vis/signals/lowbattery.png",
            "signals-icon-size-2": 0,
            "signals-blink-2": false,
            "signals-horz-2": 0,
            "signals-vert-2": 0,
            "signals-hide-edit-2": false,
            "lc-type": "last-change",
            "lc-is-interval": true,
            "lc-is-moment": false,
            "lc-format": "",
            "lc-position-vert": "top",
            "lc-position-horz": "right",
            "lc-offset-vert": 0,
            "lc-offset-horz": 0,
            "lc-font-size": "12px",
            "lc-font-family": "",
            "lc-font-style": "",
            "lc-bkg-color": "",
            "lc-color": "",
            "lc-border-width": "0",
            "lc-border-style": "",
            "lc-border-color": "",
            "lc-border-radius": 10,
            "lc-zindex": 0,
            "title": "Eingang",
            "subtitle": "Haustür",
            "oid": "javascript.0.eingang.vi_door.state"
          },
          "style": {
            "left": "0px",
            "top": "168px"
          },
          "widgetSet": "material"
        },
        "e00004": {
          "tpl": "tplMaListDoor",
          "data": {
            "g_fixed": false,
            "g_visibility": false,
            "g_css_font_text": false,
            "g_css_background": false,
            "g_css_shadow_padding": false,
            "g_css_border": false,
            "g_gestures": false,
            "g_signals": false,
            "g_last_change": false,
            "visibility-cond": "==",
            "visibility-val": 1,
            "visibility-groups-action": "hide",
            "signals-cond-0": "==",
            "signals-val-0": true,
            "signals-icon-0": "/vis/signals/lowbattery.png",
            "signals-icon-size-0": 0,
            "signals-blink-0": false,
            "signals-horz-0": 0,
            "signals-vert-0": 0,
            "signals-hide-edit-0": false,
            "signals-cond-1": "==",
            "signals-val-1": true,
            "signals-icon-1": "/vis/signals/lowbattery.png",
            "signals-icon-size-1": 0,
            "signals-blink-1": false,
            "signals-horz-1": 0,
            "signals-vert-1": 0,
            "signals-hide-edit-1": false,
            "signals-cond-2": "==",
            "signals-val-2": true,
            "signals-icon-2": "/vis/signals/lowbattery.png",
            "signals-icon-size-2": 0,
            "signals-blink-2": false,
            "signals-horz-2": 0,
            "signals-vert-2": 0,
            "signals-hide-edit-2": false,
            "lc-type": "last-change",
            "lc-is-interval": true,
            "lc-is-moment": false,
            "lc-format": "",
            "lc-position-vert": "top",
            "lc-position-horz": "right",
            "lc-offset-vert": 0,
            "lc-offset-horz": 0,
            "lc-font-size": "12px",
            "lc-font-family": "",
            "lc-font-style": "",
            "lc-bkg-color": "",
            "lc-color": "",
            "lc-border-width": "0",
            "lc-border-style": "",
            "lc-border-color": "",
            "lc-border-radius": 10,
            "lc-zindex": 0,
            "oid": "javascript.0.wohnen.vi_door.terasse.state",
            "title": "Wohnen",
            "subtitle": "Terasse"
          },
          "style": {
            "left": "0px",
            "top": "112px"
          },
          "widgetSet": "material"
        },
        "e00005": {
          "tpl": "tplMaListDoor",
          "data": {
            "g_fixed": false,
            "g_visibility": false,
            "g_css_font_text": false,
            "g_css_background": false,
            "g_css_shadow_padding": false,
            "g_css_border": false,
            "g_gestures": false,
            "g_signals": false,
            "g_last_change": false,
            "visibility-cond": "==",
            "visibility-val": 1,
            "visibility-groups-action": "hide",
            "signals-cond-0": "==",
            "signals-val-0": true,
            "signals-icon-0": "/vis/signals/lowbattery.png",
            "signals-icon-size-0": 0,
            "signals-blink-0": false,
            "signals-horz-0": 0,
            "signals-vert-0": 0,
            "signals-hide-edit-0": false,
            "signals-cond-1": "==",
            "signals-val-1": true,
            "signals-icon-1": "/vis/signals/lowbattery.png",
            "signals-icon-size-1": 0,
            "signals-blink-1": false,
            "signals-horz-1": 0,
            "signals-vert-1": 0,
            "signals-hide-edit-1": false,
            "signals-cond-2": "==",
            "signals-val-2": true,
            "signals-icon-2": "/vis/signals/lowbattery.png",
            "signals-icon-size-2": 0,
            "signals-blink-2": false,
            "signals-horz-2": 0,
            "signals-vert-2": 0,
            "signals-hide-edit-2": false,
            "lc-type": "last-change",
            "lc-is-interval": true,
            "lc-is-moment": false,
            "lc-format": "",
            "lc-position-vert": "top",
            "lc-position-horz": "right",
            "lc-offset-vert": 0,
            "lc-offset-horz": 0,
            "lc-font-size": "12px",
            "lc-font-family": "",
            "lc-font-style": "",
            "lc-bkg-color": "",
            "lc-color": "",
            "lc-border-width": "0",
            "lc-border-style": "",
            "lc-border-color": "",
            "lc-border-radius": 10,
            "lc-zindex": 0,
            "title": "Werkstatt",
            "subtitle": "Tür",
            "oid": "javascript.0.eingang.vi_door.state"
          },
          "style": {
            "left": "0px",
            "top": "calc(4 * 56px)"
          },
          "widgetSet": "material"
        }
      },
      "name": "contentWindow",
      "filterList": []
    }
    
    1 Antwort Letzte Antwort
    0
    • ? Offline
      ? Offline
      Ein ehemaliger Benutzer
      schrieb am zuletzt editiert von
      #2

      Gelöst: Es lag an "position-relative"

      1 Antwort Letzte Antwort
      0

      Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.

      Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.

      Mit deinem Input könnte dieser Beitrag noch besser werden 💗

      Registrieren Anmelden
      Antworten
      • In einem neuen Thema antworten
      Anmelden zum Antworten
      • Älteste zuerst
      • Neuste zuerst
      • Meiste Stimmen


      Support us

      ioBroker
      Community Adapters
      Donate

      353

      Online

      32.9k

      Benutzer

      83.0k

      Themen

      1.3m

      Beiträge
      Community
      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
      ioBroker Community 2014-2025
      logo
      • Anmelden

      • Du hast noch kein Konto? Registrieren

      • Anmelden oder registrieren, um zu suchen
      • Erster Beitrag
        Letzter Beitrag
      0
      • Home
      • Aktuell
      • Tags
      • Ungelesen 0
      • Kategorien
      • Unreplied
      • Beliebt
      • GitHub
      • Docu
      • Hilfe