Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Tester für Responsive Design Initiative gesucht

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Tester für Responsive Design Initiative gesucht

    This topic has been deleted. Only users with topic management privileges can see it.
    • mcm1957
      mcm1957 last edited by

      Envertech PV 1.4.0 / Admin 7.3.1

      Help und Up/Download Buttons überlappen
      Tabelle nur mit Scrollen möglich
      Tabs per scrollen erreichbar, da aber tw. hinter Up/Download verstecht suboptimal

      0bcf963f-86ef-4d3a-a8f7-4b0504a3e1bd-image.png

      d3302b28-afec-4761-902a-a132c8b5c669-image.png

      0f50582b-fc91-4d9e-95d4-eafcedc563b9-image.png

      simatec 1 Reply Last reply Reply Quote 0
      • simatec
        simatec Developer Most Active @mcm1957 last edited by

        @mcm1957 sowie ich mit @Bluefox dazu komme, werde ich mir die Punkte im Admin anschauen und auch für jsonConfig das Hamburger Menü für die Ansicht auf dem Smartphone einbauen.

        mcm1957 1 Reply Last reply Reply Quote 1
        • mcm1957
          mcm1957 @simatec last edited by

          @simatec
          Schon klar - wollt den IST Stand hier nur dokumentieren.
          Anpassungen jsonConfig komtm mit 1.4.0

          1 Reply Last reply Reply Quote 0
          • Negalein
            Negalein Global Moderator last edited by

            @simatec

            Iqontrol 3.0.0
            Scrollen nur in horizontaler Ausrichtung möglich

            Screenshot 2024-11-14 235158.jpg

            Logparser 2.2.2
            Up-/Downloadpfeile überlagern in jeder Handyauflösung

            Screenshot 2024-11-14 235338.jpg

            Node-Red 5.2.1
            Up-/Downloadpfeile überlagern in jeder Handyauflösung

            Screenshot 2024-11-14 235503.jpg

            Notification-Manager 1.3.0
            Symbole rechts abgeschnitten (vertikale Ausrichtung)

            Screenshot 2024-11-14 235629.jpg

            simatec 1 Reply Last reply Reply Quote 0
            • simatec
              simatec Developer Most Active @Negalein last edited by

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

              Up-/Downloadpfeile

              Das Thema wird im Admin generell für alle Adapter mit jsonConfig gefixt und ist bekannt.
              Nur nicht wundern, dass ich die Adapter nicht mit in der Liste aufnehme

              1 Reply Last reply Reply Quote 2
              • spicer
                spicer @simatec last edited by spicer

                @simatec
                Ist das der Grund, dass ich anfangs Monat immer "size attribute" Fehler bekomme?

                Auswahl_007.png

                Jey Cee 1 Reply Last reply Reply Quote 0
                • Jey Cee
                  Jey Cee Developer @spicer last edited by

                  @spicer ja das ist der Grund.

                  1 Reply Last reply Reply Quote 0
                  • David G.
                    David G. @simatec last edited by

                    @simatec

                    Kurze Zwischenfrage.
                    Bezieht sich die Initiative "nur" auf die Settings der Adapter (wurde bisher hier nur angesprochen) oder auch für Frontend mancher Adapter.

                    Zb im Javascriptadapter, echarts etc.

                    Jey Cee simatec 2 Replies Last reply Reply Quote 0
                    • Jey Cee
                      Jey Cee Developer @David G. last edited by

                      @david-g zurzeit bezieht sich das nur auf die Einstellungen.

                      David G. 1 Reply Last reply Reply Quote 0
                      • David G.
                        David G. @Jey Cee last edited by

                        @jey-cee

                        Okay.

                        Wird ein seitliches Scrollen der Seite als nicht responsive angesehen?
                        Weil evtl ein Eingabefeld zu breit ist oder zu viele nebeneinander sind?

                        Jey Cee 1 Reply Last reply Reply Quote 0
                        • Jey Cee
                          Jey Cee Developer @David G. last edited by

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

                          Wird ein seitliches Scrollen der Seite als nicht responsive angesehen?
                          Weil evtl ein Eingabefeld zu breit ist oder zu viele nebeneinander sind?

                          Ja, das wird als nicht Responsive angesehen.
                          So weit möglich soll so etwas vermieden werden, aber es kann Konstellationen geben da lässt es sich einfach nicht vermeiden.

                          Wenn du da was hast das noch nicht hier Thema genannt wurde, immer her damit.

                          1 Reply Last reply Reply Quote 0
                          • simatec
                            simatec Developer Most Active @David G. last edited by

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

                            @simatec

                            Kurze Zwischenfrage.
                            Bezieht sich die Initiative "nur" auf die Settings der Adapter (wurde bisher hier nur angesprochen) oder auch für Frontend mancher Adapter.

                            Zb im Javascriptadapter, echarts etc.

                            Du kannst hier gerne auch andere Frontend Themen melden. Wir arbeiten parallel daran

                            David G. 1 Reply Last reply Reply Quote 0
                            • David G.
                              David G. @simatec last edited by David G.

                              Wireguard - Buttons überlagern
                              Screenshot_20241119_193807_Chrome.jpg

                              Trashschedule - Buttons überlagern
                              Screenshot_20241119_193747_Chrome.jpg

                              Linux-Control - hier klappt garnichts 😅
                              Screenshot_20241119_193524_Chrome.jpg

                              Devicewatcher - Buttons überlagern
                              Screenshot_20241119_193258_Chrome.jpg

                              Tankerkoenig - seitliches Scrollen, Feld für api zu breit
                              Screenshot_20241119_192516_Chrome.jpg

                              Telegram - Buttons überlagern
                              Screenshot_20241119_192427_Chrome.jpg

                              Lovace - Text schiebt sich ineinander
                              Screenshot_20241119_192239_Chrome.jpg Screenshot_20241119_192255_Chrome.jpg

                              Und doch dann was in Frontend.
                              Es wäre klasse, wenn in Blockly die linke Seite mit den Blöcken kleiner wäre wie in der Desktopansicht am Smartphone (oder seitlich kleiner schiebbar).
                              Nutze Blockly in der Desktopansicht sehr viel. In der mobilen Ansicht nicht bedienbar.

                              Screenshot_20241119_191307_Chrome.jpg Screenshot_20241119_191353_Chrome.jpg

                              Garfonso 1 Reply Last reply Reply Quote 1
                              • Feuersturm
                                Feuersturm last edited by

                                ValloxMV Adapter https://github.com/hacki11/ioBroker.valloxmv
                                Die Buttons für Readme, Speichern Laden der Konfiguration werden nicht angezeigt bei den Auflösungen xs, sm
                                60f4a4b9-fe95-453a-b640-54e80ff75a0d-grafik.png

                                Sind das Fälle die auch gemeldet werden sollen?

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

                                  Adapter daswetter https://github.com/rg-engineering/ioBroker.daswetter
                                  38b415c3-680b-47a9-aa4f-b7cf7afbfaf5-grafik.png
                                  xs - Hauptseite - Es kann nicht nach unten gescrollt werden
                                  sm - Hauptseite - scrollen möglich aber es wird nicht die komplette Seite dargestellt. Unten fehlt eine Zeile

                                  Adapter esphome
                                  6b04bac5-26f4-4aba-89c7-79e5cbc0ea9a-grafik.png
                                  Es können in der mobilen Ansicht nicht alle Reiter ausgewählt werden
                                  Im Geräte Reiter überlagern sich die einzelnen Spalten für die Daten

                                  Adapter rega.0
                                  4664ed16-393f-4e56-9711-8c94b4fe565b-grafik.png
                                  Scrollen nicht möglich (gilt für alle Reiter)

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

                                    BMW v2.8.4
                                    Captcha lässt sich nur in der Horizontalen bestätigen
                                    Es schaut für mich so aus, als würde die "Maus"-Positionierung nicht korrekt erkannt werden

                                    firetv v2.1.0
                                    der "Download Button" im Bereich "Pfad zur ADB.EXE" ist nur in der Horizontalen zu sehen
                                    Die bereits hinzugefügten Geräte werden hingegen nur in der vertikalen Ansicht angezeigt.

                                    iot v3.4.3
                                    Überlagerung von Ansichten/Texten bei Alexa-Geräten
                                    3b0eb45e-0a90-46fc-9fed-e003bb2179c5-image.png

                                    iqontrol v3.0.0.
                                    kein scrollen möglich (ich bin der Meinung, das wurde bereits gemeldet)

                                    luftdaten v4.0.0
                                    unvollständige Angaben/Ansicht in der vertikalen Ansicht ("Sensorkennung" und "Mülleimer" für löschen)

                                    sonos v3.0.0
                                    unvollständige Angaben/Ansicht in der vertikalen Ansicht ("Raum" und "Mülleimer" für löschen)

                                    web v6.3.1
                                    Es ist nur "allgemeine Einstellungen" auswählbar

                                    Nachfolgende Adapter waren meines Erachtens korrekt / unauffällig
                                    (Eventuelle Überlagerung der Buttons habe ich ignoriert, da bekannt)
                                    boschindego v1.3.0
                                    broadlink2 v2.3.0
                                    daswetter v3.1.16
                                    dwd v2.8.5
                                    feiertage v1.2.0
                                    gotify v.0.3.0
                                    hm-rega v5.1.0
                                    hm-rpc v.2.0.2
                                    influxdb v.4.0.2
                                    odl v4.0.2
                                    pollenflug v2.0.0
                                    samsung v0.6.1
                                    telegram v3.9.0
                                    uv-protect v0.6.3
                                    yamaha v0.5.4

                                    Ciao und Gruß
                                    Heiko

                                    1 Reply Last reply Reply Quote 1
                                    • Garfonso
                                      Garfonso Developer @David G. last edited by Garfonso

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

                                      Lovace - Text schiebt sich ineinander

                                      Danke für's testen. 🙂

                                      Ich bin da ein wenig an meiner Grenze... das Problem an der Stelle ist wohl mein Roman, den ich da schreibe und anscheinend weiß das Element nicht, wie groß der wird (verstehe ::before und ::after und warum mittlerweile alle Webseiten sowas überall machen und nirgendwo mehr Text einfach in den Elementen steht nicht)...
                                      Kann mir da jemand weiterhelfen, der sich mit CSS besser auskennt? Habe versucht im CSS file dafür was anzupassen, aber nachdem ich jetzt da schon !important wieder reinbasteln musste, damit überhaupt was passiert, höre ich lieber auf... 😕
                                      Das Element hier ist das problematische und das wäre mein Versuch daran was zu ändern.

                                      Grundsätzlich vielen Dank an die Initiative und alle, die daran mitarbeiten. Die issues sind sehr hilfreich, weil sie schon sehr viele nützliche Informationen enthalten.

                                      OliverIO 1 Reply Last reply Reply Quote 0
                                      • OliverIO
                                        OliverIO @Garfonso last edited by 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

                                        Garfonso 1 Reply Last reply Reply Quote 1
                                        • Garfonso
                                          Garfonso Developer @OliverIO last edited by 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.).

                                          OliverIO 1 Reply Last reply Reply Quote 0
                                          • OliverIO
                                            OliverIO @Garfonso last edited by

                                            @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

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            704
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            15
                                            57
                                            4448
                                            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