Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter Material Design Widgets v0.3.x

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Test Adapter Material Design Widgets v0.3.x

    This topic has been deleted. Only users with topic management privileges can see it.
    • Scrounger
      Scrounger Developer @jobe451 last edited by

      @jobe451 sagte in Test Adapter Material Design Widgets v0.3.x:

      • In der Endversion sollten sämtliche absoluten positionierungen wegfallen

      Mega, das war genau das was ich immer noch gesucht hatte 👍

      Wenn man das Wigdet mit der größten Höhe im eingebundenen view auf relative stellt, klappt es.

      613a2886-d016-402b-909c-ed1a2770d1c7-grafik.png

      An diesen Lösungsweg hatte ich noch nie gedacht. Dann werd ich die Höhe optional machen.

      J 1 Reply Last reply Reply Quote 1
      • J
        jobe451 @Scrounger last edited by jobe451

        @Scrounger
        Danke! Dank dem Tipp mit dem Minify hab ich nun auch meinen Fork zum laufen gebracht und hab nun alle cards mit adaptiver Höhe am funktionieren.

        d6285761-9730-4efe-a152-7ca8f5498eba-image.png

        d5e1add4-9e83-4a4e-af28-faccec812756-image.png

        Den card-look erreiche ich mit

        .materialdesign-masonry-item > div > div.vis-view  {
    padding:  1rem 0.5rem;
    border-radius: 4px;
    background-color: var(--materialdesign-color-card-background);
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
}
        1 Reply Last reply Reply Quote 0
        • Latzi
          Latzi @Scrounger last edited by Scrounger

          @Scrounger
          ich habe das update auf version 0.3.9 durchgeführt, seither werden meine Tabelleneinträge auf die gesamte Tabellenhöhe gleichmäßig aufgeteilt
          5234ad97-b3e1-48cf-a565-9b5acbc77869-grafik.png
          Gibt es eine Einstellung, damit ich die Einträge in konstantem Zeilenabstand erhalte?

          Edit: Hab ich nur bei firefox, chrome stellt es normal dar.
          ffcf976f-9850-4730-8097-cef86bd7e649-grafik.png

          Edit: Verschoben, da Frage Fehler betrifft

          Scrounger 1 Reply Last reply Reply Quote 0
          • Scrounger
            Scrounger Developer @Latzi last edited by

            @Latzi
            Das sollte eigentlich nicht sein.
            Stell mir bitte mal nen Export von dem Widget zur Verfügung.

            Latzi 1 Reply Last reply Reply Quote 0
            • Latzi
              Latzi @Scrounger last edited by

              @Scrounger sagte in Test Adapter Material Design Widgets v0.3.x:

              Stell mir bitte mal nen Export von dem Widget zur Verfügung.

              Hi @Scrounger klar doch, vielen Dank!

              [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"javascript.0.Adapter.Adapter_update","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"countCols":"2","tableLayout":"standard","showHeader":true,"headerTextSize":"14px","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"center","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Test_Delete/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.0/Test_Delete/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.0/Test_Delete/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,"showColumn2":"true","colType2":"text","textAlign2":"center","showColumn3":true,"colType3":"text","textAlign3":"left","label0":"Adpater","label2":"installiert","label1":"verfügbar","padding_left0":"9","label3":"Log-Eintrag","dataJson":"","padding_left2":"","class":"","textSize3":"small","textColor2":"#8f8f8f","textSize2":"small","padding_right3":"","rowHeight":"","textSize0":"small","textSize1":"small","padding_left1":"","textColor0":"#8f8f8f","textColor1":"#8f8f8f","textColor3":"#8f8f8f","imageSize1":"","prefix3":"<span style=\"word-wrap:break-all\">","suffix3":"</span>","colorHeaderRowText":"#8f8f8f","colorHeaderRowBackground":"#202020","colorRowBackground":"#2e2e2e","colorRowText":"#fff","dividers":"","colorBackground":"transparent","prefix2":"","prefix1":"","suffix2":"","suffix1":"","columnWidth0":"","columnWidth1":"","columnWidth3":"","columnWidth2":"","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","fontFamily1":"Arial, Helvetica, sans-serif","fontFamily3":"Jura-DemiBold","fontFamily2":"Arial, Helvetica, sans-serif","fontFamily0":"Arial, Helvetica, sans-serif","colTextSize2":"14px","colTextSize3":"16px","colTextSize1":"14px","colTextSize0":"14px","name":"Adapter_updates","headerRowHeight":"35","headerFontFamily":"Arial, Helvetica, sans-serif","colNoWrap1":false,"colNoWrap0":false,"colTextColor0":"#d5d4de","colTextColor1":"#afaccd","colTextColor2":"","colTextColor3":"#d5d4de","colNoWrap3":false,"imageSize0":"","padding_right1":"","imageSize2":"","showColumn4":"true","colType4":"text","textAlign4":"center","padding_right0":"0","fixedHeader":"false","comment":""},"style":{"left":"25px","top":"72px","width":"300px","height":"500px","z-index":"10","background":"rgba(32,32,32,0.5)","background-color":"","overflow-y":"auto","border-radius":"10px"},"widgetSet":"materialdesign"}]

              1 Reply Last reply Reply Quote 0
              • C
                Coffeelover last edited by

                @jobe451 sagte in Test Adapter Material Design Widgets v0.3.x:

                Den card-look erreiche ich mit...

                Wo muss ich das denn eintragen. Im CSS hatte bei mir keinen Effekt.

                1 Reply Last reply Reply Quote 0
                • Bostil
                  Bostil last edited by

                  Hi @Scrounger, wenn ich das Spotify-Symbol verwenden möchte, scheint es ein Problem zu geben:

                  d8cbe825-e638-4c95-b4ca-3ce185fc89e9-image.png

                  Scrounger 1 Reply Last reply Reply Quote 0
                  • Scrounger
                    Scrounger Developer @Bostil last edited by

                    @Bostil
                    Danke für die Info, dadurch hab ich noch nen ganz groben Schnitzer entdeckt. Ist in der nächsten Version dann behoben.

                    Bostil 1 Reply Last reply Reply Quote 1
                    • Bostil
                      Bostil @Scrounger last edited by

                      @Scrounger Um Himmels Willen .. alles gut. Freue mich schon auf den Bugfix! 🙂

                      1 Reply Last reply Reply Quote 0
                      • C
                        Coffeelover last edited by

                        @jobe451 Sehe ich das richtig - für die dynamische Höhe muss ich immer wissen, welches Widget in der View das "höchste" ist? Oder Notfalls ein leeres HTML mit definierter Höhe einfügen.

                        1 Reply Last reply Reply Quote 0
                        • J
                          jobe451 last edited by

                          @Coffeelover

                          Sehe ich das richtig - für die dynamische Höhe muss ich immer wissen, welches Widget in der View das "höchste" ist? Oder Notfalls ein leeres HTML mit definierter Höhe einfügen.

                          Nein, überhaut nicht. Das Ziel ist ja, dass die Höhe des Contens die Höhe der Karte bestimmt. Egal ob das auf Handy oder Widescreen angeschaut wird. Auf Mobile ist ja dann gerne eine grössere Höhe Notwendig, weil Zeugs mehr in die vertikale umbricht.

                          Was ich da als screenshot gezeigt habe funktioniert aktuell nur mit einem ioBroker.vis-materialdesign Fork. Ich hoffe ich kann den schon bald wieder auflösen und der Change dort fliesst ins Projekt ein. Das Problem aktuell ist, dass wenn ich keine Höhe in einer Masonry-view oder Grid-view setze, das Widget automatisch fix 100px Höhe dem Element gibt. Das ist im wesentlichen der Change den ich gemacht hatte.

                          Mein einfachstes Beispiel ist meine Übersicht:
                          806d6825-9e01-4538-b319-73d225bcab09-image.png

                          Das hier ist einfach ein HTML-widget mit einem div als Titel und einer Tabelle mit HTML Bindings.

                          Und sieht dann so aus:
                          3508360d-38f5-412c-a7a8-1aa9d93ea9db-image.png

                          Leben tut das ganze dann in einem einem Masonry-Widget als view.

                          Möglich sind aber auch komplexere Dinge. Man kann Elemente links / rechts floaten und mit clearfix die nächste Reihe beginnen:
                          c3054163-b914-445a-8327-f2ae008f847b-image.png (irgendwie bricht da der Automatisierungs-Button um, man sieht es kaum, ist aber noch zu verbessern.)

                          Die Elemente hier passen sich der Breite an und sind mittels float positioniert mittels clearfix fängt jeweils die nächste Kolonne an.

                          Grundsätlich versuch ich absolut-positionierte Elemente zu vermeiden. Braucht aber etwas Geduld und ausprobieren.

                          Was eine Fumellei ist, ist wenn man die Positionierung von Elemente verändern will. Dann gibt es cut and copy. VIS scheint das nicht vorzusehen. Als VIS konzipiert wurde, schien progressive-design noch nicht so weit gewesen zu sein und Zeugs absolut zu positionieren ist so für den Einstieg sicher einfacher.

                          1 Reply Last reply Reply Quote 0
                          • J
                            jobe451 last edited by

                            @Coffeelover

                            Wo muss ich das denn eintragen. Im CSS hatte bei mir keinen Effekt.

                            Doch, hier:
                            c4fdad99-d8b5-48a0-a381-af5f95af311f-image.png

                            Hier mein ganzes aktuelles CSS. Unkommentiert, unaufgeräumt mit allen möglichen Unschönheiten die noch drin stecken, hoffe es hilft:

                            div.mdc-typography--headline6 {
   margin: 0 0 1.5rem 0; 
}

.JB_float_right {
    float: right;
    box-sizing:border-box;
}

.JB_float_left {
    float: left;
    box-sizing:border-box;
}

div.JB_block {
   display: block;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

table.overview td {
    padding: 0 2rem 0.5rem 0;
    width: 100%;
}

table.overview {
    width: 100%;
    max-width: 500px;
}

@media screen and (max-width: 420px) {

    div.materialdesign-masonry-container {
        column-gap: 3px;
        padding: 5px;
    }
    
    div.mdc-materialdesign-masonry-item {
        padding-bottom: 3px;
    }
}
.materialdesign-masonry-item > div > div.vis-view  {
    padding:  1rem 0.5rem;
    border-radius: 4px;
    background-color: var(--materialdesign-color-card-background);
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
}

html > body, #vis_container {
    color: white;
    background-color: var(--JB_background_primary);
}

.JB_weatherIcons img {
    height: 48px !important;
    filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(306deg) brightness(0.9) saturate(140%);
}

.JB_clearfix::after {
  content: "";
  clear: both;
  display: table;
}


div.JB_light {
    float: left;
}

div.JB_lights::after {
  content: "";
  clear: both;
  display: table;
}

div.JB_lights_group {
    float: left;
    padding: 0 0.5rem 0.5rem 0;
}

div.JB_btn_light {
    padding-bottom: 2em;
    padding: 2.5em 2em 3em 2em;
}

div.JB_btn_settings {
    
}

div.JB_btn_settings, div.JB_btn_light {
    width: 72px;
    margin: 0.2em;
}

div.materialdesign-icon-list-item-layout-vertical-image-container {
    padding: 0.3em 0;
}

div.materialdesign-icon-list-item-card--outlined {
    border-color: var(--JB_background_tertiary);
}

div.materialdesign-icon-list-item-card {
    background: var(--JB_background_primary);
}

div.theme--light.v-list {
    background: #2f353a;
    color: rgba(255,255,255,.87)
}
div.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: rgba(255,255,255,.87)!important
}

@media screen and (max-width: 420px) {
    .JB_weatherIcons .materialdesign-icon-list-item {
        padding: 0px;
        margin: 2px;
        border-width: 1px;
        min-width: unset !important;
    }

    .JB_weatherIcons .materialdesign-masonry-container {
        padding: 1px;
    }
    
    .JB_weatherIcons .materialdesign-icon-list-item-text, .JB_weatherIcons .materialdesign-icon-list-item-subText {
        font-size: 12px;
    }

    .JB_weatherIcons img {
        height: 40px !important;
    }
}

.JB_rightClock {
    right: 10px;
    top: 29px;
    font-size: large;
}

.JB_rightAlignedDate {
    right: 10px;
    top: 12px;
    font-size: smaller;
}


.JB_rightClock, .JB_rightAlignedDate {
    position: absolute;
    z-index: 2001;
}

div.theme--light.v-card {
    background-color: #00838f;
}

div.mdc-drawer__header {
    background-color: var(--mdc-theme-primary);
}

.vis-tpl-basic-HTML {
    color: white;
}


/*
    --JB_background_primary: #2d323a;
    --JB_background_secondary: #33363d;
    --JB_background_tertiary: #2a2e35;
*/
:root {
    --mdc-theme-primary:#009688 !important;
    --mdc-theme-secondary:#0097a7 !important;
    --material-progress-circular-color:#009688 !important;
    --materialdesign-color-drawer-background:#33363d !important;
    --materialdesign-color-drawer-sub-background: rgba(255,255,255,0) !important;
    --materialdesign-color-list-item-background:#00838f !important;
    --materialdesign-color-sub-list-item-background: #00695C !important;
    --materialdesign-color-list-item-hover:#000 !important;
    --materialdesign-color-sub-list-item-hover:#000 !important;
    --materialdesign-color-list-item-selected:#000 !important;
    --materialdesign-color-sub-list-item-selected:#000 !important;
    --materialdesign-color-list-item-text:white !important;
    --materialdesign-color-sub-list-item-text: white !important;
    --materialdesign-color-list-item-text-activated: white !important;
    --materialdesign-color-sub-list-item-text-activated: white !important;
    --materialdesign-color-list-item-text-secondary:rgba(0, 0, 0, 0.54) !important;
    --materialdesign-color-list-item-text-right:#000 !important;
    --materialdesign-color-list-item-text-secondary-right:rgba(0, 0, 0, 0.54) !important;
    --materialdesign-color-list-item-header:#000 !important;
    --materialdesign-color-list-item-divider:rgba(0, 0, 0, 0.12) !important;
    --materialdesign-color-list-item-backdrop:rgba(0,0,0,0.5) !important;
    --materialdesign-color-sub-list-item-backdrop:rgba(0,0,0,0.5) !important;
    --materialdesign-color-list-item-backdrop-activated:#1e88e566 !important;
    --materialdesign-color-sub-list-item-backdrop-activated:#1e88e566 !important;
    --materialdesign-color-card-background:#33363d !important;
    --materialdesign-color-card-title-section-background:transparent !important;
    --materialdesign-color-card-text-section-background:transparent !important;
    --materialdesign-color-card-title:#ffffff !important;
    --materialdesign-color-card-sub-title:#a1a1a1 !important;
    --materialdesign-color-select-background:transparent !important;
    --materialdesign-color-select-background-hover:rgba(0, 0, 0, 0.87) !important;
    --materialdesign-color-select-hint:#009688 !important;
    --materialdesign-color-select-hint_selected:#009688 !important;
    --materialdesign-color-select-border:rgba(0,0,0,.38) !important;
    --materialdesign-color-select-border-selected:#009688 !important;
    --materialdesign-color-select-text:rgba(0, 0, 0, 0.87) !important;
    --materialdesign-color-dialog-background:#fff !important;
    --materialdesign-color-dialog-button-background:transparent !important;
    --materialdesign-color-dialog-button-text:#009688 !important;
    --materialdesign-color-dialog-button-hover:#009688 !important;
    --materialdesign-color-dialog-title-background:transparent !important;
    --materialdesign-color-dialog-title:#009688 !important;
    --materialdesign-color-table-background:#fff !important;
    --materialdesign-color-table-border:rgba(0,0,0,.12) !important;
    --materialdesign-color-table-header-row-background:inherit !important;
    --materialdesign-color-table-header-row-text-color:#009688 !important;
    --materialdesign-color-table-row-background:inherit !important;
    --materialdesign-color-table-row-text-color:rgba(0, 0, 0, 0.87) !important;
    --materialdesign-color-table-row-divider:rgba(0, 0, 0, 0.12) !important;
    --materialdesign-color-switch-on:#009688 !important;
    --materialdesign-color-switch-off:#fff !important;
    --materialdesign-color-switch-track:#000 !important;
    --materialdesign-color-switch-off-hover:#009688 !important;
    --materialdesign-color-slider-before-thumb:#009688 !important;
    --materialdesign-color-slider-thumb:#009688 !important;
    --materialdesign-color-slider-after-thumb:rgba(161, 161, 161, 0.26) !important;
    --materialdesign-color-slider-track-marker:#009688 !important;
    --materialdesign-masonry-gaps:20px !important;
    --materialdesign-grid-gaps:0px !important;
    --materialdesign-icon-list-items-per-row:3 !important;
    --materialdesign-icon-list-items-min-width:50px !important;
    --materialdesign-icon-list-items-gaps:4px !important;
    --materialdesign-icon-list-items-text-font-size:14px !important;
    --materialdesign-icon-list-items-text-font-family:inherit !important;
    --materialdesign-icon-list-items-text-font-color:rgba(255,255,255, 0.7) !important;
    --materialdesign-icon-list-items-subText-font-size:12px !important;
    --materialdesign-icon-list-items-subText-font-family:inherit !important;
    --materialdesign-icon-list-items-subText-font-color:rgba(255,255,255, 0.7) !important;
    --materialdesign-icon-list-items-value-font-size:12px !important;
    --materialdesign-icon-list-items-value-font-family:inherit !important;
    --materialdesign-icon-list-items-value-font-color:#009688 !important;
    --materialdesign-icon-list-item-layout-horizontal-image-container-width:auto !important;
    --materialdesign-icon-list-item-layout-vertical-image-container-height:auto !important;
    --vue-slider-thumb-label-font-color:#fff !important;
    --vue-slider-thumb-label-font-size:12px !important;
    --vue-slider-tick-before-color:#009688 !important;
    --vue-slider-tick-after-color:#009688 !important;
    --vue-text-field-before-color:rgba(0, 0, 0, 0.2) !important;
    --vue-text-field-hover-color:#009688 !important;
    --vue-text-field-after-color:#009688 !important;
    --vue-text-field-label-before-color:rgba(0, 0, 0, 0.6) !important;
    --vue-text-field-label-after-color:#009688 !important;
    --vue-text-field-label-font-family:inherit !important;
    --vue-text-field-label-font-size:16px !important;
    --vue-text-field-label-width:inherit !important;
    --vue-text-field-background-color:rgba(0, 0, 0, 0.06) !important;
    --vue-text-field-background-hover-color:rgba(0, 0, 0, 0.12) !important;
    --vue-text-field-background-after-color:rgba(0, 0, 0, 0.06) !important;
    --vue-text-field-input-text-color:rgba(255, 255, 255, 0.87) !important;
    --vue-text-field-input-text-font-size:inherit !important;
    --vue-text-field-input-text-font-family:inherit !important;
    --vue-text-field-message-color:rgba(0, 0, 0, 0.6) !important;
    --vue-text-field-message-font-size:12px !important;
    --vue-text-field-message-font-family:inherit !important;
    --vue-text-field-counter-color:rgba(0,0,0,.6) !important;
    --vue-text-field-counter-font-size:12px !important;
    --vue-text-field-counter-font-family:inherit !important;
    --vue-text-field-appendix-color:rgba(0,0,0,.6) !important;
    --vue-text-field-appendix-font-size:inherit !important;
    --vue-text-field-appendix-font-family:inherit !important;
    --vue-text-field-translate-x:0px !important;
    --vue-text-field-translate-y:-18px !important;
    --vue-text-icon-clear-color:#009688 !important;
    --vue-text-icon-clear-size:inherit !important;
    --vue-text-icon-append-color:#009688 !important;
    --vue-text-icon-append-size:inherit !important;
    --vue-text-icon-append-cursor:inherit !important;
    --vue-text-icon-append-outer-color:#009688 !important;
    --vue-text-icon-append-outer-size:inherit !important;
    --vue-text-icon-prepand-color:#009688 !important;
    --vue-text-icon-prepand-size:inherit !important;
    --vue-text-icon-prepand-inner-color:#009688 !important;
    --vue-text-icon-prepand-inner-size:inherit !important;
    --vue-list-item-height:auto !important;
    --vue-list-item-background-color:inherit !important;
    --vue-list-item-background-hover-color:black !important;
    --vue-list-item-background-selected-color:black !important;
    --vue-ripple-effect-color:#009688 !important;
    --vue-list-item-font-size:inherit !important;
    --vue-list-item-font-family:inherit !important;
    --vue-list-item-font-color:inherit !important;
    --vue-list-item-font-color-hover:inherit !important;
    --vue-list-item-font-color-selected:inherit !important;
    --vue-list-item-subtitle-font-size:inherit !important;
    --vue-list-item-subtitle-font-family:inherit !important;
    --vue-list-item-subtitle-font-color:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-subtitle-font-color-hover:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-subtitle-font-color-selected:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-value-font-size:inherit !important;
    --vue-list-item-value-font-family:inherit !important;
    --vue-list-item-value-font-color:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-value-font-color-hover:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-value-font-color-selected:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-icon-size:20px !important;
    --vue-list-item-icon-color:#009688 !important;
    --vue-list-item-icon-color-hover:#009688 !important;
    --vue-list-item-icon-color-selected:#009688 !important;
    --vue-alerts-background-color:#fff !important;
    --vue-alerts-border-color:#009688 !important;
    --vue-alerts-border-outlined-color:#009688 !important;
    --vue-alerts-button-close-color:#009688 !important;
    --vue-alerts-text-size:16px !important;
    --vue-alerts-text-font-family:inherit !important;
    --vue-alerts-text-font-color:inherit !important;
    --vue-alerts-icon-color:black !important;
    --vue-alerts-icon-size:24px !important;
    --vue-alerts-bottom-margin:16px !important;
    --vue-btn-background-color-before:transparent !important;
    --vue-calendar-day-button-today-color:#009688 !important;
    --vue-calendar-border-color:#e0e0e0 !important;
    --vue-calendar-background-color:transparent !important;
    --vue-calender-background-outside-color:#f7f7f7 !important;
    --vue-calender-header-background-color:transparent !important;
    --vue-calendar-time-axis-background-color:transparent !important;
    --vue-calendar-time-axis-header-background-color:transparent !important;
    --vue-calendar-time-axis-text-size:12px !important;
    --vue-calendar-time-axis-text-font:inherit !important;
    --vue-calendar-time-axis-text-color:black !important;
    --vue-calendar-day-button-font-size:inherit !important;
    --vue-calendar-day-button-font-family:inherit !important;
    --vue-calendar-day-button-font-color:black !important;
    --vue-calendar-day-button-today-font-size:inherit !important;
    --vue-calendar-day-button-today-font-family:inherit !important;
    --vue-calendar-day-button-today-font-color:#fff !important;
    --vue-calendar-day-label-font-size:12px !important;
    --vue-calendar-day-label-font-family:inherit !important;
    --vue-calendar-day-label-font-color:#000000 !important;
    --vue-calendar-day-label-previous-font-color:rgba(0, 0, 0, 0.38) !important;
    --vue-calendar-day-label-today-font-size:12px !important;
    --vue-calendar-day-label-today-font-family:inherit !important;
    --vue-calendar-day-label-today-font-color:#009688 !important;
    --vue-calendar-control-container-height:10px --vue-calendar-control-button-icon-size: 24px !important;
    --vue-calendar-control-button-icon-color:#009688 !important;
    --vue-calendar-control-button-text-size:12px !important;
    --vue-calendar-control-button-text-color:black !important;
    --vue-calendar-control-button-text-font:inherit !important;
    --vue-aclendar-event-font-size:inherit !important;
    --vue-aclendar-event-font:inherit !important;
    --vue-calendar-control-button-container-flex:1 !important;
    --vue-calendar-control-button-container-min-width:initial !important;
    --vue-dialog-title-font-size:20px !important;
    --vue-dialog-title-font-family:inherit !important;
    --vue-dialog-footer-background-color:initial !important;
    --vue-dialog-view-container-distance-to-border:24px !important;
    --vue-toolbar-background-color:#009688 !important;
    --vue-overlay-scrim-opacity:0.46 !important;
    --vue-overlay-scrim-background-color:rgb(33, 33, 33);
    
    --JB_background_primary: #2d323a;
    --JB_background_secondary: #33363d;
    --JB_background_tertiary: #2a2e35;
}
                            1 Reply Last reply Reply Quote 0
                            • Scrounger
                              Scrounger Developer last edited by

                              Da ich in der zwischenzeit doch drüber gestolpert bin, dass ich controls im Table Widget benötige, hab ich angefangen das zu implementieren.

                              table_control_example.gif

                              Und da @Bluefox den vis editor einfach klasse programmiert hat, konnte ich Funktionen nutzen um eine recht einfach Möglichkeit zu schaffen, wie ihr die Controls (andere Widgets) in die Table bekommt:

                              table_controls.gif.

                              Wer es testen möchte, kann sich die aktuelle github version ziehen.
                              Das ist aber alles noch Alpha!

                              Und ja ich werde auch noch weitere Widgets integrieren 🙂

                              1 Reply Last reply Reply Quote 2
                              • C
                                Coffeelover last edited by Coffeelover

                                @jobe451 Vielen Dank für deine ausführliche und verständliche Antwort.
                                Edit: Das CSS funktioniert bei mir auch, nachdem ich " > div > div.vis-view " das aus deinem Code entfernt habe.

                                @all Sorry für halbwegs OT. 🙂

                                1 Reply Last reply Reply Quote 0
                                • Iccube
                                  Iccube last edited by

                                  @Scrounger seit dem update 3.11 gehen die icon button toggle nicht mehr auf dem Handy und beim Fully K Browser auch nicht. In Chrome auf dem Pc funktioniert es.
                                  Könnte eventuell auch schon seit version 3.09 so sein

                                  C 1 Reply Last reply Reply Quote 0
                                  • C
                                    Coffeelover @Iccube last edited by

                                    @Iccube Das kann ich nicht bestätigen. Gerade ein einfaches Toogle erstellt. Funktioniert sowohl auf dem Rechner wie auch am Handy (firefox) wie auch am Tablet (Fully)

                                    Iccube 1 Reply Last reply Reply Quote 0
                                    • Iccube
                                      Iccube @Coffeelover last edited by

                                      @Coffeelover bei mir ist es leider so wenn ich auf die Version 3.6 zurück gehe funktioniert es auf dem Handy und bei Fully wieder

                                      Scrounger 1 Reply Last reply Reply Quote 0
                                      • Scrounger
                                        Scrounger Developer @Iccube last edited by

                                        @Iccube @Coffeelover

                                        Ich kanns aber bestätigen, Handy Chrome geht nicht. Und das nur weil ich was für den apfel fixen wollte...
                                        Hab grad ne Version bei github hocgeladen, bitte teste ob es funktioniert.

                                        Iccube 1 Reply Last reply Reply Quote 0
                                        • Iccube
                                          Iccube @Scrounger last edited by

                                          @Scrounger gerade getestet funktioniert leider noch nicht

                                          Scrounger 1 Reply Last reply Reply Quote 0
                                          • B
                                            bommel_030 last edited by

                                            @Scrounger
                                            Hab fürs HTML-Card Widget keinen eigenen Thread gefunden, deshalb hier....
                                            Ist es möglich das Bild (hier horizontales Layout) zu formatieren? Aktuell zeigt er das Bild stur in Originalauflösung an. Passt nicht so ganz... Könnte das natürlich auf die richtige Auflösung konvertieren, hilft mir dann aber beim Border auch nicht weiter. Egal was ich bei der Bildquelle angebe, er nimmt nur das Bild und keine Bindings, Formatangaben etc.
                                            Ein Bild sagt mehr als tausend Worte:
                                            c61d426b-904d-4d83-9e52-02808535cc7d-image.png
                                            Oben passt die Auflösung der Tonne nicht so recht, und wie den Rahmen mit nem Binding wie bei der Tonne unten versehen geht nicht oder ich verstehe die Syntax nicht.

                                            Scrounger 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            432
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            adapater material material design widgets vis visualization widget
                                            33
                                            169
                                            17175
                                            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