Jquery UI Dialog ist nicht responsive

[Pit]

Hallo,

wenn ich meinen Terminkalender auf dem Tablet öffne, ist nahezu alles responsiv gestaltet, leider aber nicht das Jquery UI Dialogfenster.

Deshalb habe ich im Internet nach einer Lösung hierfür gesucht, finde aber immer nur den Hinweis auf ein zusätzliches Plugin inkl. einem Beispiel hierfür. Das soll zwar den Dialog nicht direkt responsiv machen, aber über Drawzusatzfunktion zusammenschiebbar machen.

Aber bei mir funktioniert weder im Desktopbrowser noch auf dem Tablet dieses Beispiel.

Was tun? Auf UI Dialog verzichten?

Edit: Mir würde auch schon ausreichen, wenn auf dem Mobildevice die Drag and Drop Funktion funktionieren würde, die UI Dialog von Hause aus mitbringt. Tuts aber auch nicht.

Pit

[Sophie]

Guten Morgen,

wenn ich dich richtig verstanden habe, suchst du nach diesem:

https://codepen.io/jasonday/pen/amlqz
https://github.com/jasonday/jQuery-UI-Dialog-extended

[Pit]

... und bei wem funktioniert das? Ich kann den Dialog aus dem Beispiel jedenfalls nicht verkleinern... schafft das wer anders? Pit

[Sophie]

Wenn ich das Fenster kleiner ziehe, dann wird auch der Dialog kleiner, passt sich also an.

Wenn du ihn noch händisch verkleiner, vergrößern willst, dann machst du dieses so

$("#content_1").dialog({
     width: 600,
    autoOpen: true,
    dialogClass: "test",
    modal: true,
    responsive: true,
    resizable: false );
    });

Neu hinzugekommen ist

resizable: false

[Pit]

Wenn ich das Fenster kleiner ziehe, dann wird auch der Dialog kleiner, passt sich also an.

Ok, stimmt.

Wenn du ihn noch händisch verkleiner, vergrößern willst, dann machst du dieses so

Neu hinzugekommen ist

resizable: false

false? Hört sich für mich unlogisch an, funktioniert aber auch nicht (auch nicht, wenn ich Deinen kleinen syntaxfehler korrigiere), ich kann mit meiner Maus unten rechts das Fenster nicht kleiner/größer machen.

Zudem: Kann es sein, dass das Plugin bis heute in UI, Vers. 1.12 eh nicht funktioniert? (ich würds gerne verlinken, ich finde aber gerade den Eintrag nicht, in dem die Rede davon ist, dass ab Vers. 1.10 das Plugin eh buggy ist.)

Pit

[Sophie]

Bei mir funktioniert es wunderbar.

[Pit]

Bei mir funktioniert es wunderbar.

Was funktioniert bei Dir wunderbar? Das Plugin in UI > 1.10 oder das Verkleinern des Dialogs?

Pit

[Sophie]

das Verkleinern des Dialogs und das automatische anpassen an die Breite.

[Pit]

das Verkleinern des Dialogs und das automatische anpassen an die Breite.

Firefox 57 kann das nicht. Chrome 62 kanns, allerdings natürlich nicht mit resizable: false, sondern true.

Nützt mir aber alles nichts, wenn das

1. Nicht browserübergreifend funktioniert
2. ggf. mit Jquery/UI > 1.10 nicht funktioniert.

Gibt es Alternativen zu diesem plugin?

Pit

[Sophie]

Wenn du es selber mit HTML und CSS nachbaust: https://codepen.io/wolf-w/pen/jbEdBW

In dem Beispiel müsste noch ein

resize: both;

hinzugefügt werden. Das verschieben, wenn dieses für dich wichtig ist müsste mit jQuery nachgerüstet werden.

[Gunnar Bittersmann]

@@Sophie

Wenn du es selber mit HTML und CSS nachbaust:

Dann aber bitte nicht so!

https://codepen.io/wolf-w/pen/jbEdBW

Nicht bedienbar. (Nicht mit Tastatur.)

Es ist zwar ein <label for="menuToggle"> vorhanden, aber kein dazugehöriges Eingabe-Element, denn <input id="menuToggle" type="checkbox"> wurde per #menuToggle{ display: none } komplett entfernt.

Merke: Wenn Eingabe-Elemente bedienbar sein sollen, dürfen sie nicht mit display: none (oder visibility: hidden) unsichtbar gemacht werden, sondern sie dürfen nur visuell unsichtbar gemacht werden.

Allerdings sollte man nicht den Checkbox-Hack verwenden, sondern einen Button. Wie gesagt.

LLAP 🖖

[Sophie]

Lass es einfach auf meine Nachrichten zu antworten.

[Gunnar Bittersmann]

@@Sophie

Lass es einfach auf meine Nachrichten zu antworten.

Ich berichtige hier alles, was einer Berichtung bedarf.

Wenn du nicht willst, dass ich auf deine Postings antworte, dann mach halt gleich alles richtig!

LLAP 🖖

[Sophie]

Dieses Beispiel kommt nicht von mir. Du machst dich lächerlich. Du hast an allem etwas auszusetzen. Schau mal deine WebSeite an. Dazu sage ich mal lieber nichts.

[Gunnar Bittersmann]

@@Sophie

Dieses Beispiel kommt nicht von mir.

Was nichts dran ändert, dass es falsch ist.

Du machst dich lächerlich. Du hast an allem etwas auszusetzen.

Nicht an allem. Aber an schlechten Beispielen.

Und ich finde es nicht zum Lachen, wie viele schlechte Beispiele so die Runde machen.

Schau mal deine WebSeite an. Dazu sage ich mal lieber nichts.

Du kannst ruhig sagen, dass sie nicht gerade ein gutes Beispiel für gelungenes Grafikdesign ist.

Ich hoffe, ich komme bald mal dazu, die zu überarbeiten. Nötig ist es. Eine Idee hab ich schon.

LLAP 🖖