Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • 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. Tester
  4. Tester für Responsive Design Initiative gesucht

NEWS

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    11
    1
    525

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.7k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.6k

Tester für Responsive Design Initiative gesucht

Geplant Angeheftet Gesperrt Verschoben Tester
57 Beiträge 15 Kommentatoren 7.6k Aufrufe 16 Watching
  • Ä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.
  • OliverIOO OliverIO

    @garfonso sagte in Tester für Responsive Design Initiative gesucht:

    Kann mir da jemand weiterhelfen, der sich mit CSS besser auskennt

    du machst aus s8 ein s12, fertig
    bei material macht man zu 90% nix mehr direkt mit css anweisungen,
    da ja material ne menge vordefinierte stile mitbringt.

    dann gibt es das gridssystem, das die breite, eines sagen wir mal container, von denen es auch mehrere ineinander verschachtelte geben kann,
    in 12 spalten einteilt.
    dann gibt es sogenannte breakpoints, für die bei verschiedenen gerätebreiten diese spalten unterschiedlich eingestellt werden können.

    also auf dem desktop passen bspw 4 felder nebeneinander, so kann man 3 nehmen, da 12/4=3 ist, also jedes feld ist 3 einheiten breit.
    auf einem handy passt aber max 1 feld nebeneinander hin, also dann 12
    hier gibt es l=large=breit, m=medium und s=small, das steht für die verschiedenen gerätebreiten

    da du eh nur ein feld pro zeile darstellen willst (zumindest auf dem ersten Reiter, kannst du save
    s12 m12 l12 in der css klasse angeben.

    b4a2130c-f678-411a-9272-39617824a3d5-image.png

    hier mal auch noch die dokumentation, zu den hier verwendeten und möglichen css klassen
    https://materializecss.com/

    ach und die web developer tools vom browser (F12) sind gold wert, da du dort live ändern kannst und du nicht immer einen build/publish zyklus durchmachen musst

    GarfonsoG Offline
    GarfonsoG Offline
    Garfonso
    Developer
    schrieb am zuletzt editiert von Garfonso
    #39

    @oliverio said in Tester für Responsive Design Initiative gesucht:

    du machst aus s8 ein s12, fertig

    Ne, reicht halt nicht. Da sieht es bei mir immer noch so aus, wie auf dem Screenshot. Der Text ist offensichtlich zu lang und das Element weiß nicht, dass der länger ist als erwartet und danach noch mehr Freiraum nötig wäre. Möglich, dass das Problem auch nur beim deutschen Text existiert. Stell mal die Sprache um.
    (wenn ich in den Browsertools über das Element fahre, also das <div> mit Klasse s12 sehe ich, dass der Text außerhalb des markierten Bereichs ist. In der Struktur steht der Text auch nicht innerhalb eines Elements, sondern irgendwie zwischen ::before und ::after nach einem <span>... wie gesagt, weiß nicht, warum, aber die Struktur scheint bei allen Elementen so zu sein)
    Hier mal ein Bild dazu:
    lovelace-ui.png
    rechts siehst du, dass col12 mittlerweile dabei ist. Links ist der orangene Bereich das Element mit col12, aber der Text ist offensichtlich größer als das Element.

    Und beim Testen mit den Browsertools ist mir aufgefallen, dass ich im Firefox gar nicht scrollen kann (es gibt zwar einen Scrollbalken, aber der scrollbare Bereich ist genauso groß wie der Bildschirm und was unten "raushängt", ist egal). Im Chrome kann ich scrollen, aber da bleibt das mit dem Text ineinander schieben halt. Daher hatte ich versucht, bei diesem Element mit der longtext Klasse mehr Platz unten dran zu basteln, wenn das Fenster schmaler ist. Und ja, die Browser-Tools kenne ich, nur so schaffe ich überhaupt, was am UI zu ändern. Wobei CSS dann immer meint, meine Änderungen wären es nicht wert auf das Element angewendet zu werden, weshalb ich irgendwie grundsätzlich zu !important greifen muss. schulterzuck

    Den Link kenne ich ebenfalls, ist mir schon öfter gegeben worden. Ich verstehe aber offen gestanden überhaupt nicht, was ich da suchen sollte und wie mir das weiterhelfen sollte... :-/ (verstehe aber ehrlich gesagt auch nicht, was materialize ist und wo da die Abgrenzung zu anderen Dingen ist usw.).

    Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

    Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

    OliverIOO 1 Antwort Letzte Antwort
    0
    • GarfonsoG Garfonso

      @oliverio said in Tester für Responsive Design Initiative gesucht:

      du machst aus s8 ein s12, fertig

      Ne, reicht halt nicht. Da sieht es bei mir immer noch so aus, wie auf dem Screenshot. Der Text ist offensichtlich zu lang und das Element weiß nicht, dass der länger ist als erwartet und danach noch mehr Freiraum nötig wäre. Möglich, dass das Problem auch nur beim deutschen Text existiert. Stell mal die Sprache um.
      (wenn ich in den Browsertools über das Element fahre, also das <div> mit Klasse s12 sehe ich, dass der Text außerhalb des markierten Bereichs ist. In der Struktur steht der Text auch nicht innerhalb eines Elements, sondern irgendwie zwischen ::before und ::after nach einem <span>... wie gesagt, weiß nicht, warum, aber die Struktur scheint bei allen Elementen so zu sein)
      Hier mal ein Bild dazu:
      lovelace-ui.png
      rechts siehst du, dass col12 mittlerweile dabei ist. Links ist der orangene Bereich das Element mit col12, aber der Text ist offensichtlich größer als das Element.

      Und beim Testen mit den Browsertools ist mir aufgefallen, dass ich im Firefox gar nicht scrollen kann (es gibt zwar einen Scrollbalken, aber der scrollbare Bereich ist genauso groß wie der Bildschirm und was unten "raushängt", ist egal). Im Chrome kann ich scrollen, aber da bleibt das mit dem Text ineinander schieben halt. Daher hatte ich versucht, bei diesem Element mit der longtext Klasse mehr Platz unten dran zu basteln, wenn das Fenster schmaler ist. Und ja, die Browser-Tools kenne ich, nur so schaffe ich überhaupt, was am UI zu ändern. Wobei CSS dann immer meint, meine Änderungen wären es nicht wert auf das Element angewendet zu werden, weshalb ich irgendwie grundsätzlich zu !important greifen muss. schulterzuck

      Den Link kenne ich ebenfalls, ist mir schon öfter gegeben worden. Ich verstehe aber offen gestanden überhaupt nicht, was ich da suchen sollte und wie mir das weiterhelfen sollte... :-/ (verstehe aber ehrlich gesagt auch nicht, was materialize ist und wo da die Abgrenzung zu anderen Dingen ist usw.).

      OliverIOO Offline
      OliverIOO Offline
      OliverIO
      schrieb am zuletzt editiert von
      #40

      @garfonso
      also ich habe jetzt auch mal auf 324 pixel runtergeschraubt.
      ja, dann reicht ES nicht nur die eine Zeile auf s12 zu setzen, sondern die anderen beiden auch noch, die ebenfalls nocht auf s8 stehen. sonst laufen die in den text hinein
      c440f81d-9044-41f3-b44a-b04caf268889-image.png

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      GarfonsoG 1 Antwort Letzte Antwort
      0
      • OliverIOO OliverIO

        @garfonso
        also ich habe jetzt auch mal auf 324 pixel runtergeschraubt.
        ja, dann reicht ES nicht nur die eine Zeile auf s12 zu setzen, sondern die anderen beiden auch noch, die ebenfalls nocht auf s8 stehen. sonst laufen die in den text hinein
        c440f81d-9044-41f3-b44a-b04caf268889-image.png

        GarfonsoG Offline
        GarfonsoG Offline
        Garfonso
        Developer
        schrieb am zuletzt editiert von
        #41

        @oliverio
        Ne, das reicht nicht... die stehen bei mir auch alle auf s12. Bei dir sieht man auch, dass schon der Abstand unter dem Text fehlt. Stell mal auf Deutsch um, dann kommen noch die zwei Zeilen dazu, die dann im Element darunter hängen.

        Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

        Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

        OliverIOO 1 Antwort Letzte Antwort
        0
        • GarfonsoG Garfonso

          @oliverio
          Ne, das reicht nicht... die stehen bei mir auch alle auf s12. Bei dir sieht man auch, dass schon der Abstand unter dem Text fehlt. Stell mal auf Deutsch um, dann kommen noch die zwei Zeilen dazu, die dann im Element darunter hängen.

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von
          #42

          @garfonso

          ok ich denke ich habe den übeltäter gefunden

          die folgende definition beschränkt die zeilenhöe auf 25px.
          wenn man das deaktiviert, sieht es ok aus (nicht super, aber ok)

          .m [type=checkbox]+span:not(.lever) {
              line-height: 25px;
          }
          

          am besten schreibst du in das style.css noch die folgende anweisung rein
          das deaktiviert dann das original.
          auch sollte die style.css erst nach materialize.css im scripttag angegeben werden.

          .m [type=checkbox]+span:not(.lever) {
              line-height: inherit;
          }
          

          probier mal, bin mir auch nicht sicher, live hat es funktioniert

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          GarfonsoG 1 Antwort Letzte Antwort
          1
          • OliverIOO OliverIO

            @garfonso

            ok ich denke ich habe den übeltäter gefunden

            die folgende definition beschränkt die zeilenhöe auf 25px.
            wenn man das deaktiviert, sieht es ok aus (nicht super, aber ok)

            .m [type=checkbox]+span:not(.lever) {
                line-height: 25px;
            }
            

            am besten schreibst du in das style.css noch die folgende anweisung rein
            das deaktiviert dann das original.
            auch sollte die style.css erst nach materialize.css im scripttag angegeben werden.

            .m [type=checkbox]+span:not(.lever) {
                line-height: inherit;
            }
            

            probier mal, bin mir auch nicht sicher, live hat es funktioniert

            GarfonsoG Offline
            GarfonsoG Offline
            Garfonso
            Developer
            schrieb am zuletzt editiert von
            #43

            @oliverio
            Danke für die Hilfe. :-)

            Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

            Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

            OliverIOO 1 Antwort Letzte Antwort
            0
            • GarfonsoG Garfonso

              @oliverio
              Danke für die Hilfe. :-)

              OliverIOO Offline
              OliverIOO Offline
              OliverIO
              schrieb am zuletzt editiert von
              #44

              @garfonso
              Hat es jetzt geholfen?

              Meine Adapter und Widgets
              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
              Links im Profil

              1 Antwort Letzte Antwort
              0
              • wendy2702W Online
                wendy2702W Online
                wendy2702
                schrieb am zuletzt editiert von
                #45

                Ist das Admin Thema auch was für hier?

                iPad Chrome Hosts view

                IMG_1381.png

                Bitte keine Fragen per PN, die gehören ins Forum!

                Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                1 Antwort Letzte Antwort
                0
                • wendy2702W Online
                  wendy2702W Online
                  wendy2702
                  schrieb am zuletzt editiert von
                  #46

                  Shuttercontrol auf IPAD Pro

                  IMG_1387.png

                  Bitte keine Fragen per PN, die gehören ins Forum!

                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                  simatecS 1 Antwort Letzte Antwort
                  0
                  • David G.D Online
                    David G.D Online
                    David G.
                    schrieb am zuletzt editiert von David G.
                    #47

                    Mir ist heute noch was aufgefallen.
                    Über das Handy habe ich nicht die Möglichkeit das Update des js-conrollers anzustoßen.

                    Am PC sehe ich dafür was.

                    Mobil mit mobiler Ansicht
                    Screenshot_20250108_182800_Chrome.jpg

                    Mobil mit Desktopansicht
                    Screenshot_20250108_182821_Chrome.jpg

                    Edit
                    Über die "Kachelansicht" ist es möglich.
                    Screenshot_20250108_183238_Chrome.jpg

                    Zeigt eure Lovelace-Visualisierung klick
                    (Auch ideal um sich Anregungen zu holen)

                    Meine Tabellen für eure Visualisierung klick

                    1 Antwort Letzte Antwort
                    0
                    • wendy2702W wendy2702

                      Shuttercontrol auf IPAD Pro

                      IMG_1387.png

                      simatecS Offline
                      simatecS Offline
                      simatec
                      Developer Most Active
                      schrieb am zuletzt editiert von
                      #48

                      @wendy2702 ist mit v1.8.7 gefixt

                      • Besuche meine Github Seite
                      • Beitrag hat geholfen oder willst du mich unterstützen
                      • HowTo Restore ioBroker
                      1 Antwort Letzte Antwort
                      1
                      • M Offline
                        M Offline
                        micklafisch
                        schrieb am zuletzt editiert von
                        #49

                        vis-2 editor auf dem ipad:

                        1cdfa000-f220-450e-b7c6-b6b89a074fb2-image.png

                        1 Antwort Letzte Antwort
                        0
                        • David G.D Online
                          David G.D Online
                          David G.
                          schrieb am zuletzt editiert von David G.
                          #50

                          Habe es hier glaube noch nicht gelesen.
                          Im Iot 3.3.0 Adapter bekomme ich am Smartphone weder in der mobilen noch Desktopansicht oben die Reiter gewischt oder verschoben um in die anderen Menüs zu kommen.

                          Screenshot_20250309_120814_Chrome.jpg

                          Zeigt eure Lovelace-Visualisierung klick
                          (Auch ideal um sich Anregungen zu holen)

                          Meine Tabellen für eure Visualisierung klick

                          simatecS 1 Antwort Letzte Antwort
                          0
                          • David G.D David G.

                            Habe es hier glaube noch nicht gelesen.
                            Im Iot 3.3.0 Adapter bekomme ich am Smartphone weder in der mobilen noch Desktopansicht oben die Reiter gewischt oder verschoben um in die anderen Menüs zu kommen.

                            Screenshot_20250309_120814_Chrome.jpg

                            simatecS Offline
                            simatecS Offline
                            simatec
                            Developer Most Active
                            schrieb am zuletzt editiert von
                            #51

                            @david-g Welche Admin Version ist bei dir installiert?

                            • Besuche meine Github Seite
                            • Beitrag hat geholfen oder willst du mich unterstützen
                            • HowTo Restore ioBroker
                            David G.D 1 Antwort Letzte Antwort
                            0
                            • simatecS simatec

                              @david-g Welche Admin Version ist bei dir installiert?

                              David G.D Online
                              David G.D Online
                              David G.
                              schrieb am zuletzt editiert von
                              #52

                              @simatec

                              v7.4.10

                              Zeigt eure Lovelace-Visualisierung klick
                              (Auch ideal um sich Anregungen zu holen)

                              Meine Tabellen für eure Visualisierung klick

                              simatecS 1 Antwort Letzte Antwort
                              0
                              • David G.D David G.

                                @simatec

                                v7.4.10

                                simatecS Offline
                                simatecS Offline
                                simatec
                                Developer Most Active
                                schrieb am zuletzt editiert von
                                #53

                                @david-g sagte in Tester für Responsive Design Initiative gesucht:

                                @simatec

                                v7.4.10

                                Im latest ist die Version, die das Problem bereits behebt

                                • Besuche meine Github Seite
                                • Beitrag hat geholfen oder willst du mich unterstützen
                                • HowTo Restore ioBroker
                                David G.D 2 Antworten Letzte Antwort
                                0
                                • simatecS simatec

                                  @david-g sagte in Tester für Responsive Design Initiative gesucht:

                                  @simatec

                                  v7.4.10

                                  Im latest ist die Version, die das Problem bereits behebt

                                  David G.D Online
                                  David G.D Online
                                  David G.
                                  schrieb am zuletzt editiert von
                                  #54

                                  @simatec

                                  Teste ich heute abend

                                  Zeigt eure Lovelace-Visualisierung klick
                                  (Auch ideal um sich Anregungen zu holen)

                                  Meine Tabellen für eure Visualisierung klick

                                  1 Antwort Letzte Antwort
                                  0
                                  • simatecS simatec

                                    @david-g sagte in Tester für Responsive Design Initiative gesucht:

                                    @simatec

                                    v7.4.10

                                    Im latest ist die Version, die das Problem bereits behebt

                                    David G.D Online
                                    David G.D Online
                                    David G.
                                    schrieb am zuletzt editiert von David G.
                                    #55

                                    @simatec

                                    Mit der 7.4.21 hab ich das selbe Problem.

                                    Zeigt eure Lovelace-Visualisierung klick
                                    (Auch ideal um sich Anregungen zu holen)

                                    Meine Tabellen für eure Visualisierung klick

                                    simatecS 1 Antwort Letzte Antwort
                                    0
                                    • David G.D David G.

                                      @simatec

                                      Mit der 7.4.21 hab ich das selbe Problem.

                                      simatecS Offline
                                      simatecS Offline
                                      simatec
                                      Developer Most Active
                                      schrieb am zuletzt editiert von
                                      #56

                                      @david-g Da sollte in der mobilen Ansicht ein Hamburger Menü erscheinen

                                      • Besuche meine Github Seite
                                      • Beitrag hat geholfen oder willst du mich unterstützen
                                      • HowTo Restore ioBroker
                                      David G.D 1 Antwort Letzte Antwort
                                      0
                                      • simatecS simatec

                                        @david-g Da sollte in der mobilen Ansicht ein Hamburger Menü erscheinen

                                        David G.D Online
                                        David G.D Online
                                        David G.
                                        schrieb am zuletzt editiert von David G.
                                        #57

                                        @simatec

                                        Screenshot_20250310_194949_Chrome.jpg

                                        Iot 3.3.0
                                        Admin 7.4.21

                                        Zeigt eure Lovelace-Visualisierung klick
                                        (Auch ideal um sich Anregungen zu holen)

                                        Meine Tabellen für eure Visualisierung klick

                                        1 Antwort Letzte Antwort
                                        0
                                        Antworten
                                        • In einem neuen Thema antworten
                                        Anmelden zum Antworten
                                        • Älteste zuerst
                                        • Neuste zuerst
                                        • Meiste Stimmen


                                        Support us

                                        ioBroker
                                        Community Adapters
                                        Donate

                                        864

                                        Online

                                        32.5k

                                        Benutzer

                                        81.8k

                                        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