Scrollbalken verdeckt die letzte Zeile von HTML/Markdown Elementen

[J-J-A]

Man kann die letzte Zeile nur noch umständlich anklicken.

Scrollt man im Chrome auf der Höhe des Scrollbalken, blendet dieser sich aus irgendwelchen Gründen auch nicht mehr automatisch aus. In Safari ist das ähnlich mühsam, im Firefox geht es besser. Unter Mac OS mit Contao 3.5.0 getestet.

Ich habe diesen Feldern im BE einfach ein padding nach unten gegeben. Vielleicht könnte man das schon im Core integrieren, falls es auch anderen so geht.

[leofeyer]

Wie lässt sich das in der Onlinedemo reproduzieren?

[asaage]

Das scheint Browserspezifisch zu sein.
win-chrome vergrößert das Feld wenn es Focus bekommt aber verdeckt zunächst auch die letzte Zeile.

[Aybee]

Zum Testen in einem CE Typ HTML dieses hier eingeben:

<p>
  Ich bin eine lange Textzeile. Ich bin eine lange Textzeile. Ich bin eine lange Textzeile. Ich bin eine lange Textzeile. Ich bin eine lange Textzeile.
</p>

Es erscheint eine vertikale Scrollbar und der Quelltext (die 3 Zeilen) sind nicht auf einen Blick zu sehen. Da müsste hauptsächlich unten etwas Luft geschaffen werden. FF, Chrome, Edge, IE11 Opera.
Hier direkt bei ACE sieht das besser aus https://ace.c9.io/#nav=about. Gleichen Code in den Editor einfügen.

[J-J-A]

Im Prinzip bei allen Typen HTML/Code/Markdown.

[leofeyer]

Vielleicht wäre es das beste, wenn wir angesichts der Cross-Browser-Problematik mit Soft-Wraps arbeiten würden, so dass gar nicht erst ein vertikaler Scrollbalken entsteht.

  var editor = ace.edit('<?= $this->selector ?>_div');
  editor.$blockScrolling = Infinity;
  editor.setTheme("ace/theme/clouds");
  editor.renderer.setScrollMargin(3, 3, 0, 0);
  editor.renderer.scrollBy(0, -6);
  editor.getSession().setValue(ta.value);
  editor.getSession().setMode("ace/mode/<?= Backend::getAceType($this->type) ?>");
  editor.getSession().setUseSoftTabs(false);
  editor.getSession().setUseWrapMode(true);  // <----------- diese Zeile einfügen
  editor.setAutoScrollEditorIntoView(true);

Könnt ihr bitte mal testen, ob das das Problem behebt?

[Aybee]

Für mich wäre das so ok - Windows 10, FF, Chrome, Edge, IE11. Vielleicht ein wenig viel Luft unten, aber nicht unangenehm mit diesem Platz.

[leofeyer]

Was meinst Du mit "ein wenig viel Luft unten"? So sieht es bei mir aus:

[Aybee]

Abgesicherter Modus, keine dcaconfig oder initconfig, Theme default, C 3.5.12, FF 46.01

[leofeyer]

Was passiert, wenn Du Zeile 62 löschst?

[Aybee]

[Aybee]

Ups, sorry, das war nicht mit 62 gelöscht, sondern wieder der Ursprungszustand ohne die neue Zeile von oben.

[Aybee]

Ok, setUseWrapMode wieder entfernt und + editor.renderer.scrollBar.getWidth() entfernt, dann sieht es so aus, wie bei dir.

[Aybee]

Sorry, jetzt dreh ich hier langsam am Rad: Neue Zeile setUseWrapMode und + editor.renderer.scrollBar.getWidth() entfernt - damit war es so wie bei dir.

[leofeyer]

Behoben in 8a2afd9.