Resize-Handle vergrößern

[JürgenB]

Hallo,

wenn man es dem Besucher ermöglicht, über die css-Regel resize die Größe eines Elements zu verändern, erscheint in der linken unteren Ecke des Elements ein kleines Symbol, das mit der Maus angeklickt werden muss.

Kennt ihr irgendeine Möglichkeit, dieses wahrlich kleine Symbol zu vergrößern bzw. zu verändern? Mein Recherchen haben ergeben, dass das nicht geht. Als Workaround wurden größere und besser sichtbare Grafiken über das Originalsymbol gelegt. Die anklickbare Fläche wurde aber dadurch nicht größer. Ich hoffe allerdings, schlecht gesucht zu haben.

Hier mal meine Baustelle.

Ich finde nicht, dass man der Karte ansieht, dass sie vergrößert werden kann.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

erscheint in der linken unteren Ecke des Elements ein kleines Symbol

also bei mir erscheint es rechts. Hast Du RTL als Leserichtung eingestellt?

Kennt ihr irgendeine Möglichkeit, dieses wahrlich kleine Symbol zu vergrößern

Nein. Selbst wenn ich die Seite zoome ([Strg]&[+] bzw. Mausrad&[+]), bleibt das Teil hartnäckig unverändert. Dieses UI-Element steuert der Browser und lässt sich da nicht dreinreden.

[Edit]Im Chromium sehe ich dieses UI-Element noch nicht einmal. Hovere ich an der Stelle, verwandelt sich mein Mausizeiger entsprechend. Aber das war's auch schon.[/Edit]

Ich finde nicht, dass man der Karte ansieht, dass sie vergrößert werden kann.

Das stimmt. Aber dafür kann ich einen Vollbildmodus nutzen. Das ist gut offensichtlich.

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

erscheint in der linken unteren Ecke des Elements ein kleines Symbol

also bei mir erscheint es rechts. Hast Du RTL als Leserichtung eingestellt?

nein, aber wenn ich links sage, meine ich rechts. In der Tanzschule hatte ich meine Schuhe mit R unbd L beschriftet.

Ich finde nicht, dass man der Karte ansieht, dass sie vergrößert werden kann.

Das stimmt. Aber dafür kann ich einen Vollbildmodus nutzen. Das ist gut offensichtlich.

dieses recht große Symbol ist ja auch von mir. Aber der Wunsch ist, die Karte breiter und die Diagramme daneben schmaler zu machen.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

In der Tanzschule hatte ich meine Schuhe mit R und L beschriftet.

So wie ich das mache?

@Christian Kruse: Da ist was faul - ?size=medium in der vorigen Version des Bildes - NICHT in dieser - rasiert fast alles weg.

Rolf

[Felix Riesterer]

Lieber JürgenB,

Aber der Wunsch ist, die Karte breiter und die Diagramme daneben schmaler zu machen.

siehste, jetzt kommen wir der Sache doch schon deutlich näher!

Dein Ansatz ist meines Erachtens der falsche. Das UI-Element für Deine Absicht sollte ein senkrechter Balken mit Anfasser sein, der mit Drag&Drop horizontal bewegt werden kann. Das Vergrößerungssymbol in der rechten unteren Ecke ist nicht nur für horizontale, sondern auch für vertikale Vergrößerung gedacht, kann also prinzipiell zu viel (und visuell zu wenig), weshalb ich es für den falschen Ansatz halte.

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

Dein Ansatz ist meines Erachtens der falsche.

ich wollte eben das nehmen, was es schon gibt, warum das Rad neu erfinden. Leider ist dieses Rad nicht wirklich rund.

Das UI-Element für Deine Absicht sollte ein senkrechter Balken mit Anfasser sein, der mit Drag&Drop horizontal bewegt werden kann. Das Vergrößerungssymbol in der rechten unteren Ecke ist nicht nur für horizontale, sondern auch für vertikale Vergrößerung gedacht, kann also prinzipiell zu viel (und visuell zu wenig), weshalb ich es für den falschen Ansatz halte.

Also so, wie Rolf vorgeschlagen und verlinkt hat. Eine Javascriptlösung ist ja auch kein Problem, da ohne JS die Funktion nicht benötigt wird.

Im Moment denke ich an eine Lösung mit <input type="range">. Man kann dem Slider per css das gewünschte Aussehen geben, und ich muss mich um das Drag&Drop nicht kümmern, auch wenn wir da eine Lösung in der Schublade haben.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

Also so, wie Rolf vorgeschlagen und verlinkt hat.

ja, split.js eben (kannte ich noch nicht).

auch wenn wir da eine Lösung in der Schublade haben.

Nö, das löst Dein Problem nicht, weil es einen völlig anderen Use-Case hat. Du willst ja nix frei über das Fenster draggen, sondern eine Breite verändern.

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

auch wenn wir da eine Lösung in der Schublade haben.

Nö, das löst Dein Problem nicht, weil es einen völlig anderen Use-Case hat. Du willst ja nix frei über das Fenster draggen, sondern eine Breite verändern.

naja, da das Draggen auf eine Richtung beschrängen, ist nun wirklich kein Problem. Aber ich versuche es erst mal anders.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

in Chrome sehe ich auch kein Handle.

Was ich rausfinden konnte: Die tile-, shadow- und overlay-pane von Leaflet verhindert die Darstellung. Löscht man alle 3 raus, erscheint das Handle. Jede einzelne dieser 3 Panes kann die Darstellung verhindern.

Im Firefox ist die Darstellung wie erwartet - klein - und nicht änderbar.

Nach etwas Suchen habe ich das Pseudoelement -webkit-resizer gefunden, mit dem man in Blink/Webkit Browsern wohl das Resize-Handle stylen kann.

Dieser SO Thread diskutiert das Thema, bietet aber auch keine wirkliche Lösung außer: Guck Dir die Antwortbox von Stackoverflow an und clone sie. Die hat einen vertikalen Resizebar über die ganze Breite.

Ich hatte selbst schonmal angesetzt, einen eigenen Resizer zu schreiben, war aber angesichts des resize-Property nicht wirklich motiviert. Im Prinzip brauchst Du sowas wie einen split-pane Container, der über die ganze Grenze der Panes hinweg einen Resize-Bar hat.

Da hab ich was gefunden: https://split.js.org/

Rolf

[Felix Riesterer]

Lieber Rolf,

nur damit Du's weißt: Du warst nur deshalb schneller mit Deinem Posting, weil Mama mich mit einem Telefonat ausgebremst hat!

Liebe Grüße

Felix Riesterer

[Der Martin]

Hallo Felix,

nur damit Du's weißt: Du warst nur deshalb schneller mit Deinem Posting, weil Mama mich mit einem Telefonat ausgebremst hat!

ja, irgendjemand muss ja schuld sein. Immer auf die Kleinen ... 😟

Live long and pros healthy,
 Martin

[Felix Riesterer]

Lieber Martin,

ja, irgendjemand muss ja schuld sein.

aber doch nicht ich!!1einself

Immer auf die Kleinen ... 😟

Nix klein. Mama ist die größte!

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

das war eine zweieinhalbstündige Bremse!!1eins!elf!

Mütter...

Rolf

[JürgenB]

Hallo,

ältere Herrschaften haben in der häuslichen Isolation schon etwas mehr Redebedarf.

Gruß
Jürgen

[Der Martin]

Hi,

ältere Herrschaften haben in der häuslichen Isolation schon etwas mehr Redebedarf.

das ist auch meine Erfahrung. Und Frauen meist deutlich mehr als Männer.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo JürgenB,

bei allem Geflachse - was hältst Du denn von split.js?

Rolf

[JürgenB]

Hallo Rolf,

bei allem Geflachse - was hältst Du denn von split.js?

bisher nur grob draufgeschaut und viele DIVs gesehen. Mein Experiment sieht z.Zt. so aus: Test Variable Breite. Aber da gibt es noch einiges zu tun. Die Formatierung des <input type='range'> habe ich „geklaut“, aber noch nicht verstanden, und im Safari wird die Lücke zwischen den DIVs unterdrückt. Aber als PoC geht's wohl durch.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

der Slider ist eine geniale Idee 😀

Dass man mit -moz-webkit-ms-Prefixen um sich werfen muss, ist natürlich ärgerlich.

Der kleine Offset zwischen Slider und Gap kommt bei Dir daher, dass der Slider einen Margin hat, den muss man auf 0 setzen.

gap wird von Safari nur für Grid unterstützt, ist richtig. D.h. man muss für den Safari einen Würgherum bauen. Aber wenn man das tut, kann man den auch für alle Browser verwenden, das spart Mühe.

Ich hätte da einen Alternativvorschlag: Viel CSS, viele custom properties, und das JS tut kaum noch was außer die Höhe des Thumbs auf 100% zu justieren und die Sliderposition in ein Custom Property übertragen. Und es limitiert die minimalen und maximalen Werte des Sliders.

https://jsfiddle.net/Rolf_b/q13dc4es/

Ob man das so hexen kann, dass man eine min-width auf den Panels setzt und das JS sich das daraus ausrechnet, ganz egal welche Einheiten verwendet werden, das hab ich noch nicht raus.

Leider ist es eine Lösung, die auf dem IE zu nicht lesbarer Darstellung der Seite führt, befürchte ich. Wegen der CSS Variablen custom properties. Da muss vermutlich noch irgendwas im Script dazu, dass dann ein festes Breitenverhältnis einstellt.

Rolf

[Rolf B]

Hallo JürgenB,

ich habe jetzt eine Version, die rein via CSS den IE "erkennt" und dafür ein festes Breitenverhältnis einstellt. Das gelingt mittels @supports, was der IE nicht kennt.

http://test.borchmann.one/slider.html

Der Firefox hat ein Rundungsproblem; er rechnet die Breite der Panels etwas zu klein aus. Keine Ahnung, wieso; Chrome macht es richtig. Ich habe die Breitenformel mal auf calc(0.1px + (100% - var(--slider-width)) * var(--slider-position)) geändert, dieses Zehntelpixel hat's geheilt 😂

Rolf

[JürgenB]

Hallo Rolf,

das sieht ja perfekt aus, vielen Dank. Wenn du nichts dagegen hast, bin ich faul und übernehme deinen Entwurf, statt deine Ideen in meinen einzuarbeiten.

Eine Frage noch: der focus-Effekt (andere Hintergrundfarbe) wird nicht angezeigt, hast du eine Idee, warum? Aber mach dir deswegen keine Arbeit, ich brauche focus nicht unbedingt.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

Wenn du nichts dagegen hast, bin ich faul und übernehme deinen Entwurf, statt deine Ideen in meinen einzuarbeiten.

Dafür hab ich's gemacht. Solltest Du dafür eine Belohnung leisten wollen, spende sie an Selfhtml 😉

Und aus dem Beispiel sollten wir noch ein Tutorial für's Wiki machen, und da dann auch vertikale Slider behandeln. Oder bekommen wir damit Ärger mit split.js?

Der Thumb bekommt den Fokus offenbar nicht, nur der Slider. Das sieht man an dem weißen Rahmen (dem outline), der beim Ziehen erscheint. Keine Ahnung, ist wohl so.

Lösung: andere Reihenfolge der Selektorteile. Was bei einer Abfolge von Pseudoklassen eigentlich wurscht sein sollte, aber dieses nonstandard-Zeugs ist eh merkwürdig. Ein :: signalisiert ein Pseudoelement, und das sollte ja nun ein Kind vom Slider sein. Also müsste da ein Space zwischen. Aber damit geht es nicht. So geht's:

Edit Rolf B: Pseudogeschwafel gestrichen

   .panel-slider:focus::-webkit-slider-thumb {
     background-color: #eee;
   }

Rolf

[Matthias Apsel]

Hallo Rolf B,

Ein :: signalisiert ein Pseudoelement, und das sollte ja nun ein Kind vom Slider sein. Also müsste da ein Space zwischen. Aber damit geht es nicht. So geht's:

Ein Pseudoelement ist kein Kind des Elements, sondern Teil des Elements. Beispiel ::first-letter.

Bis demnächst
Matthias

[JürgenB]

Hallo Rolf,

ich habe das mal eingebaut. Zusätzlich habe ich noch einen Handler für das resize-Event eingebaut, damit sich die Höhe des Sliders bei Größenänderung des Viewports anpasst, und einen Mediaquery, der bei schmalen Viewports die Blöcke untereinander setzt.

Gruß
Jürgen

[JürgenB]

Ups ... hier noch der Link zur Testseite.

Gruß
Jürgen