Buttontext mittig zentrieren
Pit
- css
0 Henry0 Pit0 Matthias Apsel
0 Matthias Apsel0 Pit
Hallo Forum,
in meinem fiddle-Beispiel werden die Buttontexte + und -
, die neben dem Zeitslider stehen (nachdem man ins Datumfield geklcikt hat), mittig dargestellt.
Leider werden sie in meinem "Produktivscript" links-oben-bündig dargestellt, obwohl ich keinerlei css-Einfluss auf die Buttons oder Jquery UI genommen habe.
Frage: Wie kann das überhaupt sein, dass es im fiddle und im Produktivscript unterschiedlich dargestellt wird? Das würde doch definitiv für Einfluss meiner css-Dateien sprechen?
Frage: Wie kann ich das Plus und Minus im Produktivscript zwingend mittig darstellen ohne gleich Einfluss auf alle anderen UI-Buttons zu nehmen?
Pit
Hallo Pit,
- Frage: Wie kann das überhaupt sein, dass es im fiddle und im Produktivscript unterschiedlich dargestellt wird?
Wie kann es sein, dass es bei dir im Fiddle überhaupt angezeigt wird? Welcher Browser?
Gruss
Henry
Hallo Henry,
Wie kann es sein, dass es bei dir im Fiddle überhaupt angezeigt wird? Welcher Browser?
FF 58.0.1 (64-Bit), ich rufe den fiddle über http auf.
Pit
Hallo Pit,
FF 58.0.1 (64-Bit), ich rufe den fiddle über http auf.
"TypeError: $(...).datetimepicker is not a function"
Bis demnächst
Matthias
Hallo Matthias,
"TypeError: $(...).datetimepicker is not a function"
Bei mir läufts einwandfrei, jedenfalls im FF, im Chrome nicht. Was ist das denn schon wieder? 😕
Pit
Hallo Pit,
Bei mir läufts einwandfrei, jedenfalls im FF, im Chrome nicht. Was ist das denn schon wieder? 😕
Bei mir nicht im FF. Warum hast du eigentlich immer noch nicht das Script selbst eingebunden?
Btw. @alle warum zeigt FF bei http eigentlich nicht die komplette URL an. Empfinde ich schon als ziemlichen Informationsverlust.
Gruss
Henry
Hallo Henry,
Bei mir nicht im FF. Warum hast du eigentlich immer noch nicht das Script selbst eingebunden?
Das habe ich. Da sind inzwischen 4 externe Ressourcen eingebunden.
Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.
Pit
Hallo Pit,
Da sind inzwischen 4 externe Ressourcen eingebunden.
und was ist mit denen?
<link rel="stylesheet" type="text/css" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>
Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.
Doch, tut es. Es liegt an der Bedienung, die allerdings(subjektiv betrachtet) nicht jedem (bin einer davon) liegt. Objektiv betrachtet, ist es aber nicht schlecht.
Gruss
Henry
Hallo Henry,
und was ist mit denen?
Was genau meinst du? Bei mir werden sie anscheinend eingebunden.
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
Oh, ich sehe gerade, die 3. Datei ist unnötig, die kann raus...
Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.
Doch, tut es. Es liegt an der Bedienung, die allerdings(subjektiv betrachtet) nicht jedem (bin einer davon) liegt. Objektiv betrachtet, ist es aber nicht schlecht.
Ok, hilf mir bitte mal, was mache ich denn da falsch?
Pit
Hallo Pit,
Hallo Henry,
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
Wie schon geschrieben, wenn du lokal Dateien bei Fiddle einbinden kannst (weiss nicht ob das geht, dann zb. sinnbildlich so <script src=".my_xy_fiddlepfad/jquery-ui-timepicker-addon-i18n.min.js"></script>
. Wenn das nicht geht, dann den Inhalt daraus direkt ins Fiddle als Text. <script>/* hier ist der js Inhalt von trentrichardson usw…*/ </script>
Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.
Ok, hilf mir bitte mal, was mache ich denn da falsch?
Bei Fiddle? Mal abgesehen von den Einbindungen, nichts, soweit ich das sehe, aber ich habe mit Fiddle auch keine Erfahrung, so sollte das besser jemand beurteilen der diese dort hat. Aber was ich bisher sehe, sind nur Browsereinschränkungen dein Problem und nicht Fiddle, daher erst mal den Code von Fremdverweisen (http + https) säubern(alles selbst einbinden) und dann mal sehen was passiert.
Gruss
Henry
Hallo Henry,
Aber was ich bisher sehe, sind nur Browsereinschränkungen dein Problem und nicht Fiddle, daher erst mal den Code von Fremdverweisen (http + https) säubern(alles selbst einbinden) und dann mal sehen was passiert.
Ok, dann schau mal bitte rein.
Pit
@@Pit
Ok, dann schau mal bitte rein.
Ich finde nicht heraus, wie das Ding funktionieren soll.
Ich fokussiere das Eingabefeld und ein Datepicker erscheint. Ich drücke die Tab-Taste und er ist wieder weg. OK, ich bin ja beim nächsten fokussierbaren Element. Also mit Shift-Tab wieder zurück.
Datepicker ist wieder da. Pfeil-Tasten tun nichts. Leertaste gibt ein Leerzeichen ins Eingabefeld ein. Wie komme ich in diesen Datepicker? Gar nicht?
Ich würde sagen, das Ding funktioniert nicht. Das Ding ist kaputt.
LLAP 🖖
Hallo Gunnar,
Ich finde nicht heraus, wie das Ding funktionieren soll.
Ich fokussiere das Eingabefeld und ein Datepicker erscheint. Ich drücke die Tab-Taste und er ist wieder weg. OK, ich bin ja beim nächsten fokussierbaren Elemente. Also mit Shift-Tab wieder zurück.
Datepicker ist wieder da. Pfeil-Tasten tun nichts. Leertaste gibt ein Leerzeichen ins Eingabefeld ein. Wie komme ich in diesen Datepicker? Gar nicht?
Ich würde sagen, das Ding funktioniert nicht. Das Ding ist kaputt.
Ich schätze Deine Hilfe hier im Forum sehr.
Deshalb bin ich Dir auch gar nicht böse, wenn Du immer und immer wieder auf (mitunter auch) provokante Weise die Unart monierst, dass es Dinge gibt, die nicht tastaturbedienbar sind. Gäbe es eine Alternative, die sowohl Maus, als auch Touch- und Tastaturbedienbar wäre (natürlich bei gegebenen restlichen Ansprüchen), würde ich sie nehmen.
So muß ich gewissermaßen "eine kröte schlucken" und ich verzichte dann auf die Tastaturbedienbarkeit, bis ich eine bessere Alternative gefunden habe.
Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage. Schade, weil ansonsten gefiehl mir diese Alternative sehr gut, sogar viel besser als der Datetimepicker, den ich jetzt nehme.
Pit
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
Hallo Pit,
Ok, dann schau mal bitte rein.
Leider nichts zu sehen wird nichts geladen, zumindest bei mir so.
Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage. Schade, weil ansonsten gefiehl mir diese Alternative sehr gut, sogar viel besser als der Datetimepicker, den ich jetzt nehme.
Und meinen Nachtrag (geht auch Beides) hast du gelesen?
Gruss
Henry
Hallo Henry,
die Nachträge erst eben gelesen, aber dafür inzwischen meine Lösung mal auf dem Tablet ausprobiert und ich fands horror… wirklich nicht nutzbar, obwohl + und - Buttons neben den Slidern waren.
Nun habe ich mal Gunnars html5 Lösung ausprobiert. Halt 2 Felder, eines für Datum (inkl. Kalender) und das Timefeld daneben. Auf dem Tablet ein Traum... im FF schlechter als meine vorherige Lösung.
Ich überlege gerade, ob ich mit dem Manko im FF bei dieser Lösung leben soll oder ob ich eine Weiche baue, die nach mobiler Anwendung schaut oder nach Desktop…
Das pickadate hatte ich auch schon gefunden, aber ich hätte eben gerne, dass der User aus dem Kalender aussuchen darf und für die Zeiteinstellung etwas touchbedienbares hat.
Nebenfrage: Kann man eigentlich input type date
so einstellen, dass er beim selektieren eines datums Selbiges gleich abfeuert?
pit
Hallo Pit,
Nebenfrage: Kann man eigentlich
input type date
so einstellen, dass er beim selektieren eines datums Selbiges gleich abfeuert?
Du meinst eine Vorauswahl? Klar, wie immer mit value, allerdings das Format muss stimmen.
<input type="date" name="americaconquerer" value="1492-10-12">
Gruss
Henry
Hallo Henry,
Du meinst eine Vorauswahl? Klar, wie immer mit value, allerdings das Format muss stimmen.
Nein, das meinte ich nicht. Ich möchte, dass bei der Auswahl eines datums gleich das Formular abgesendet wird, ohne dass der User einen Button klicken muß.
Pit
Hallo Pit,
Ich möchte, dass bei der Auswahl eines datums gleich das Formular abgesendet wird, ohne dass der User einen Button klicken muß.
Das ist keine gute Idee, weil es nicht der Nutzererfahrung entspricht.
Bis demnächst
Matthias
Hallo Matthias,
Das ist keine gute Idee, weil es nicht der Nutzererfahrung entspricht.
In diesem Fall schon, weil der User hier über einen Vorschaukalender einen Sprung im Hauptkalender vollziehen können soll. Da wäre das Klicken eines zusätzlichen Submitbuttons eher umständlich und ungewohnt.
pit
@@Pit
Ich möchte, dass bei der Auswahl eines datums gleich das Formular abgesendet wird, ohne dass der User einen Button klicken muß.
Dann musst du ja nur auf das richtige Event lauschen und bei dessen Eintreten das Formular abschicken. Nur, welches wäre das richtige Event?
Ich hab da mal eine Spielwiese erstellt. Console an und durchgespielt! Mit Maus und auch mit Tastatur …
Oh Schreck! Sieht wohl so aus, als würde es das richtige Event nicht geben.
LLAP 🖖
Hi Gunnar,
Oh Schreck! Sieht wohl so aus, als würde es das richtige Event nicht geben.
Und nun?
Für mich als mausnutzer sehen input date
und change date
gleichermaßen gut aus.
Was stört Dich an denen?
Pit
@@Pit
Hi Gunnar,
Oh Schreck! Sieht wohl so aus, als würde es das richtige Event nicht geben.
Und nun?
Für mich als mausnutzer sehen
input date
undchange date
gleichermaßen gut aus.
Und ich sag noch „und auch mit Tastatur“.
Was stört Dich an denen?
Dass die Events bei Tastaturbedienung öfter feuern als dir lieb sein dürfte. Du willst sicher nicht ständig das Formular neu abschicken.
Vielleicht hilft es, sich einen Polyfill zu :focus-visible
/:-moz-focusring
anzusehen; da muss ja auch irgendwie Maus (o.ä. Pointer) und Tastatur unterschieden werden.
LLAP 🖖
Hallo,
Dass die Events bei Tastaturbedienung öfter feuern als dir lieb sein dürfte. Du willst sicher nicht ständig das Formular neu abschicken.
Kann man das nicht mit einem cleveren Timeout o.Ä. abfangen?
Gruß
Kalk
@@Pit
Gäbe es eine Alternative, die sowohl Maus, als auch Touch- und Tastaturbedienbar wäre (natürlich bei gegebenen restlichen Ansprüchen), würde ich sie nehmen.
Letztens hatte Henry einen Datepicker vorgestellt, zu dem ich auch was geschrieben hatte.
Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage.
Dass <input type="date">
in jedem Browser funktioniert, schrieb ich auch erst unlängst.
LLAP 🖖
Hi Gunnar,
Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage.
Dass
<input type="date">
in jedem Browser funktioniert, schrieb ich auch erst unlängst.
Um <input type="date">
ging es mir viel weniger als um date-local, und das funktioniert eben nicht in jedem Browser.
Aber ok, vielleicht wird das irgendwann so sein.
Ich habe mich jetzt entschieden, Deinem Rat zu folgen und nutze date + time in kombination. Zumindest funktioniert das zuverlässig auch auf dem Smartphone. Auf dem desktop gefällt es mir etwas weniger gut, egal welcher Browser, aber was willste machen…
Pit
Hi Gunnar,
Dass
<input type="date">
in jedem Browser funktioniert, schrieb ich auch erst unlängst.
Weißt Du, was ungünstig ist?
input type="time" gibt kein "empty" weiter 😟 Es gibt 00:00 weiter, aber dann weiß ich nicht, ob der User 00:00 eingegeben hat oder das Feld gar nicht ausgefüllt hat.
Fällt Dir hierzu ein Workarround ein?
Pit
hallo
Fällt Dir hierzu ein Workarround ein?
Du willst also wissen, ob ein User ein Input auch bedient hat. Das ist gegeben bei onblur.
hallo
Fällt Dir hierzu ein Workarround ein?
Du willst also wissen, ob ein User ein Input auch bedient hat. Das ist gegeben bei onblur.
Ist das wirklich so? Was ist denn, wenn der User das Feld ausfüllt und anschließend das Eingetragene wieder herauslöscht?
pit
Hallo Pit,
Du willst also wissen, ob ein User ein Input auch bedient hat.
Das ist gegeben bei onblur.Ist das wirklich so?
Ja.
Was ist denn, wenn der User das Feld ausfüllt und anschließend das Eingetragene wieder herauslöscht?
Dann auch.
Du erinnerst dich an die Benutzererfahrung? 😉
Bis demnächst
Matthias
Hi,
Du erinnerst dich an die Benutzererfahrung? 😉
Nein? Was hats damit auf sich?
Davon ab: ich hab Quatsch erzählt, "time" gibt wohl "empty" weiter, es braucht doch keinen Workarround, sorry.
Pit
hallo
Was ist denn, wenn der User das Feld ausfüllt und anschließend das Eingetragene wieder herauslöscht?
Auch dann gilt: User hat input aktiv bearbeitet. Du willst diese Information auswerten um Defaultwerte von abgesegneten Werten zu unterscheiden.
@@beatovich
Du willst also wissen, ob ein User ein Input auch bedient hat. Das ist gegeben bei onblur.
Nicht wirklich. Das blur
-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.
LLAP 🖖
hallo
Nicht wirklich. Das
blur
-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.
Die akzeptanz eines Vorgabewertes kann durchaus als Bearbeitung aufgefasst werden.
@@beatovich
Nicht wirklich. Das
blur
-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.Die akzeptanz eines Vorgabewertes kann durchaus als Bearbeitung aufgefasst werden.
Ich lande aus Versehen schon bei Eingabefeld X, da wollte ich noch gar nicht hin. Ich gehe also einen Schritt zurück, wo ich zunächst erstmal hin wollte. Mein Zurückgehen wird als Bearbeitung von Eingabefeld X aufgefasst und das Formular abgeschickt. Ernsthaft jetzt?
LLAP 🖖
Nicht wirklich. Das
blur
-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.Die akzeptanz eines Vorgabewertes kann durchaus als Bearbeitung aufgefasst werden.
Ich lande aus Versehen schon bei Eingabefeld X, da wollte ich noch gar nicht hin. Ich gehe also einen Schritt zurück, wo ich zunächst erstmal hin wollte. Mein Zurückgehen wird als Bearbeitung von Eingabefeld X aufgefasst und das Formular abgeschickt. Ernsthaft jetzt?
Ersthaft: Du kannst auch aus Versehen ein Formular absenden.
Hallo Henry,
Btw. @alle warum zeigt FF bei http eigentlich nicht die komplette URL an. Empfinde ich schon als ziemlichen Informationsverlust.
Ist zwar doof, kannst du aber wieder einschalten.
--> about:config
--> trim
--> browser.urlbar.trimURLs auf false setzen
Pit
Hallo Pit,
--> browser.urlbar.trimURLs auf false setzen
dass das nicht der Standard ist… Aber funktioniert, danke.
Gruss
Henry
Kein Aprilscherz, bei mir läufts. Aber eben mit den im 1.Post beschriebenen Einschränkungen.
Pit
Hallo Pit,
Wie kann ich das Plus und Minus im Produktivscript zwingend mittig darstellen ohne gleich Einfluss auf alle anderen UI-Buttons zu nehmen?
Schau dir mit den Entwicklertools an, welche Eigenschaften verwendet werden.
Bis demnächst
Matthias
Hallo Matthias,
Wie kann ich das Plus und Minus im Produktivscript zwingend mittig darstellen ohne gleich Einfluss auf alle anderen UI-Buttons zu nehmen?
Schau dir mit den Entwicklertools an, welche Eigenschaften verwendet werden.
Da habe ich bereits reingeschaut, aber ich finde die Stelle nicht, an der ich eingreifen könnte. Und bei einem meiner Versuche ist es mir dann gelungen, über
.ui-icon
{
position: relative !important;
margin: 0px !important;
padding: 0px !important;
height: 100% !important;
width: 100% !important;
top: 0px !important;
left: 0px !important;
}
das Plus und Minus einigermaßen mittig zu setzen, aber eben nur einigermaßen. Und zudem waren auch viele andere buttons danach nicht mehr sauber dargestellt.
Pit
Hallo Pit,
Vielleicht solltes du dann doch mal die Produktivseite zeigen. Du kannst auch bei bplaced.net schnell und unkompliziert eine erstellen.
Bis demnächst
Matthias