Verschieben von Dialogboxen in FHEMWEB

krikan · 08 Mai 2017, 18:09:28

Hallo!

Gibt es eigentlich eine einfache Lösung Dialogboxen in FHEMWEB in Firefox/IE zu verschieben (bspw. Tastenkombination) ?
Bisher behelfe ich mir mit einer Kombination aus Vergrößern und Verkleinern mit der Maus, weil ich keine direkte Tastenkombination bzw. direkte Möglichkeit mit der Maus kenne.
Beispielsweise würde ich im anhängenden Screeshot gerne die Box so verschieben, dass ich auch die Events sehe.
Irgendwie finde ich die vermutlich simple Lösung nicht..

Gruß, Christian

Wuppi68 · 08 Mai 2017, 19:09:48

Habe gerade den FF auf dem MAC gestartet .... geht aber auch mit dem Safari, vermutlich auch dann im IE

Verschieben dirket kann ich auch nicht ABER die Größe ändern und dadurch indirekt verschieben

Oder das entsprechende Stylesheet anpassen, damit es auch al verschiebbar angezeigt wird - ich habe davon aber gegen Null Ahnung

rudolfkoenig · 08 Mai 2017, 20:41:25

fhemweb.js verwendet die JQuery-UI Dialoge. Da sie ohne Titelleiste gebaut werden, kann man sie nicht einfach mit der Maus verschieben, und von keyboard Shortcuts habe ich nicht gehoert. Bin aber fuer "sinnvolle" Aenderungen zu haben.

Wuppi68 · 08 Mai 2017, 21:53:50

Zitat von: rudolfkoenig am 08 Mai 2017, 20:41:25
fhemweb.js verwendet die JQuery-UI Dialoge. Da sie ohne Titelleiste gebaut werden, kann man sie nicht einfach mit der Maus verschieben, und von keyboard Shortcuts habe ich nicht gehoert. Bin aber fuer "sinnvolle" Aenderungen zu haben.

hier ist ein beispiel von einem Drag Window https://jqueryui.com/draggable/

Code Auswählen

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>

rudolfkoenig · 09 Mai 2017, 11:13:10

Zitat$( "#draggable" ).draggable();

Dass es prinzipiell irgendwie geht, habe ich nie bezweifelt, ich brauche aber konkrete(!) Vorschlaege, wie ich es loesen soll. Eine einfache Variante waere im Dialog die Titelzeile anzuzeigen (in defaultCommon.css die Zeile mit titlebar loeschen), schaut aber mAn albern aus, da ich nicht weiss, was ich reinschreiben soll, und verschwendet Platz.

Ellert · 09 Mai 2017, 20:38:25

Vielleicht so:

Code Auswählen

/* jQuery-UI mods */
div.ui-dialog { border:3px solid #278727; padding: 0 0 0 0; }
div.ui-dialog-buttonpane{padding:0 0 0 0!important;}
div.ui-dialog-titlebar {padding:0 0 0 0!important;margin:0 0 0 0!important;border:none;background:#F0F0D8;font-size:80%;}
...

dann rücken die Buttons etwas zusammen und die Titelzeile wird schmaler.

justme1968 · 09 Mai 2017, 20:47:59

würde es nicht reichen diesen einen dialog fest so weit nach links zu schieben das die events zu sehen sind?

rudolfkoenig · 10 Mai 2017, 13:17:37

Ich habe den Vorschlag von Ellert leicht modifziert uebernommen, damit kann man per Drag&Drop in der Titelleiste das Dialog verschieben, siehe Anhang. Verschieben per Keyboard geht nicht, dazu waere zusaetzlicher Code notwendig.

erwe · 13 Mai 2017, 14:30:39

Pardon, die Störung.
Wie erzeuge ich eine Dialogbox?
Danke, erwe

rudolfkoenig · 13 Mai 2017, 16:35:47

Z.Bsp. in der FHEMWEB DetailAnsicht unten "Delete this device". Oder mit einem get Befehl.

Wuppi68 · 13 Mai 2017, 19:51:47

klappt hervorragend

Danke Rudi