Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [gelöst] vis.editor: eigene Widgets: style-top Angabe spielt verrückt

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User last edited by

      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 Reply Last reply Reply Quote 0
      • ?
        A Former User last edited by

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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post

        Support us

        ioBroker
        Community Adapters
        Donate

        1.0k
        Online

        32.1k
        Users

        80.7k
        Topics

        1.3m
        Posts

        1
        2
        383
        Loading More Posts
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes
        Reply
        • Reply as topic
        Log in to reply
        Community
        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
        The ioBroker Community 2014-2023
        logo