iframe und div wie textarea größe vom benutzer änderbar ohne js

[uwe]

Hallo zusammen.

Für Formulare gibt es das Element <textarea>. Das hat den großen Vorteil, daß es vom Benutzer in der Größe geändert werden kann. Die übrige Webseite passt sich der neuen Größe dieses Elements automatisch an.

Die Frage, lässt sich eventuell das Element <iframe> mit einer Eigenschaft (Attribut, CSS?) ebenfalls dazu bringen, sich vom Benutzer in der Größe ändern zu lassen? Gibt es hierfür eine Lösung ohne javascript? Geht es sonst vielleicht mit einem anderen Element wie <div>?

Vielen Dank

uwe

[Der Martin]

Hallo,

Für Formulare gibt es das Element <textarea>. Das hat den großen Vorteil, daß es vom Benutzer in der Größe geändert werden kann.

aber nicht, weil es die Spezifikation so vorsieht. Das ist browserabhängig.

Die Frage, lässt sich eventuell das Element <iframe> mit einer Eigenschaft (Attribut, CSS?) ebenfalls dazu bringen, sich vom Benutzer in der Größe ändern zu lassen?

Meines Wissens nicht.

Gibt es hierfür eine Lösung ohne javascript?
Geht es sonst vielleicht mit einem anderen Element wie <div>?

Ich denke, da musst du in irgendeinen sauren Apfel beißen. Aber ich werde den Thread weiter mitverfolgen und lasse mich gern eines Besseren belehren.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo uwe,

ja, dafür gibt es die CSS Eigenschaft resize.

Aber bei iframes funktioniert die nicht, stelle ich gerade fest. Oder ich bin zu ungeschickt...

Mein Lösungsvorschlag: Lege ein Element um den iframe und mache dieses resizable. Dieses Rahmenelement darf für die overflow-Eigenschaft nicht den Wert visible haben. Aber es sollte etwas Padding haben, damit das Resize-Handle nicht im iframe landet.

<div class="frameholder">
  <iframe src="..."></iframe>
</div>

.frameholder {
  overflow: hidden;             /* Alles außer visible! */
  resize: both;
  padding: 4px;
  background-color: buttonface; /* sic! */
  min-height: 500px;            /* Resize geht nicht da drunter */
  display: flex;
}
.frameholder iframe {
  flex: 1 1 auto;
}

Die Flexbox mit flex: 1 1 auto ist eine einfache Möglichkeit, dass der iframe den Container 100% ausfüllt.

Sollte mittlerweile in allen Browsern gehen.

Rolf

[Rolf B]

Hallo Rolf,

Nachtrag: Stimmt gar nicht, Chrome kann iframes resizen. Problem ist nur, dass der Scrollbar des dargestellten Inhalts über dem Resize-Handle liegt, d.h. wenn man den iframe in der Größe ändern will, scrollt man statt dessen die Webseite darin.

Workaround: dem iframe ein Padding von 4px bis 8px geben, und eine Hintergrundfarbe. Und das den "Resize-Rahmen" nennen.

Die Lösung mit dem Resize-Container ist, wie ich jetzt entdeckt habe, ein alter Firefox-Würgherum aus den Zeiten von Bug 680823.

Rolf

[Der Martin]

Hallo Rolf,

ja, dafür gibt es die CSS Eigenschaft resize.

und wieder was gelernt Die kannte ich bisher nicht.

Einen schönen Tag noch
 Martin

[uwe]

Riesen Dank.

Funktioniert wirklich :-)

Grüße

uwe

[Linuchss]

Die Frage, lässt sich eventuell das Element <iframe> mit einer Eigenschaft (Attribut, CSS?) ebenfalls dazu bringen, sich vom Benutzer in der Größe ändern zu lassen?

So sieht es aus ...

... dann so ...

... und schließlich so ...

Gefunden auf https://remso.eu/?ORT=9014