FTUI größe Datetimepicker widget

[Haecksler]

Hallo zusammen,
habe heute morgen ein wenig mit dem widget datetimepicker zum Einstellen meiner Weckzeit herumgespielt.

Prinzipiell funktioniert es auch, allerdings finde ich die größe des Popup zur Zeitauswahl zu klein um es vernünftig am Tablet bedienen zukönnen.
Es ist fast unmöglich am Tablet (10") den Scroller zu erwischen habe auch schon an der CSS des Datetimepicker herumgespielt...aber ohne großen Erfolg.

Wichtig wäre es für mich den Scroller größer zubekommen, so dass man ihn mit dem Finger besser erwischen kann.
Vielleicht kann mir jemand einen Tip geben, was an der CSS angepasst werden muss.

Danke!

Gruß,
Stefan

[kvo1]

Hallo Stefan,
Ich hab das gleiche Problem in einem anderen Thread auch schon eingestellt , leider aber auch noch keine
Lösung.....mangels CSS Kentnisse ! Leider !
Ansonsten find ich den Datetimeicker echt cool und genau passend für meine Aufgabe.

[roman1528]

Ich hab' da mal bissl rumgespielt...
Ehrlich gesagt habe ich nicht viel mehr lust mich damit zu baschäftigen... aber ihr könnt diese Klassen ja noch verändern^^

einfügen in eure *-user.css

Code Auswählen Erweitern


.xdsoft_datetimepicker {
    width: 500px !important;
    height: 350px !important;
}
.xdsoft_datetimepicker .xdsoft_datepicker.active {
    width: 76% !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker.active {
    width: 20% !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 280px !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
    text-align: left !important;
        height: 50px !important;
        line-height: 50px !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
    padding: 2px 25px 2px 5px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar th {
        height: 40px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th {
        height: 50px !important;
}
.xdsoft_scrollbar {
    width: 20px !important;
}


Grüße^^

[kvo1]

Moin Moin,

Roman, Danke ...... ich habe mir das nahzu perfekt (für mich) hingefummelt !

Wieder ein Stück weiter 

gruss kvo1

[Garbsen]

Ich hab' da mal bissl rumgespielt...
Ehrlich gesagt habe ich nicht viel mehr lust mich damit zu baschäftigen... aber ihr könnt diese Klassen ja noch verändern^^

einfügen in eure *-user.css

Code Auswählen Erweitern


.xdsoft_datetimepicker {
    width: 500px !important;
    height: 350px !important;
}
.xdsoft_datetimepicker .xdsoft_datepicker.active {
    width: 76% !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker.active {
    width: 20% !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 280px !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
    text-align: left !important;
        height: 50px !important;
        line-height: 50px !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
    padding: 2px 25px 2px 5px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar th {
        height: 40px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th {
        height: 50px !important;
}
.xdsoft_scrollbar {
    width: 20px !important;
}


Grüße^^

Moin

Kann if jemand hierzu ein wenig Anleitung geben?
Ich habe die Werte in der User.css alle verdoppelt, das ändert aber bei mir nichts. Scheint also noch so banal zu sein.
Lieben Dank
K-H

[kvo1]

hier mal meine Anpassung.....


.xdsoft_datetimepicker {
    width: 150px !important;
    height: 350px !important;
}
.xdsoft_datetimepicker .xdsoft_datepicker.active {
    width: 90% !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker.active {
    width: 90% !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 290px !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
    text-align: center !important;
        height: 50px !important;
        line-height: 50px !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
    padding: 2px 25px 2px 5px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar th {
        height: 40px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th {
        height: 50px !important;
}
.xdsoft_scrollbar {
    width: 20px !important;
}

[Garbsen]

Erstmal Danke, aber leider ändert das bei mir nichts.
Vermutlich liegt es daran, dass ich entweder die Änderungen in der falschen Datei durchführe oder die Datei noch irgendwie einbinden muss?
Ich habe die Datei www/tablet_eval/css/fhem-tablet-ui-user.css geändert, ist das korrekt?

[Garbsen]

Ok, ich bin ein Stück weiter gekommen.
Ich hatte die User.css noch nicht als Stylesheet eingebunden. Das habe ich gemacht u d jetzt sehe ich auch Veränderungen.
Ich schaffe es aber noch nicht die Schriftgröße in der jetzt vergrößerten Eingbebox zu verändern. Welcher Eintrg (Inder User.css?) ist notwendig, um die Schriftgröße zu erhöhen?

Weitere Frage: kann man beim Widget den Pfeil neben dem Auswahlfeld wegbekommen? (oder noch besser durch einen Pfeil nach oben wahlweise ändern? D.h. Je nach Einsatzfeld mal Pfeil nach oben und mal Pfeil nach unten) ich nutze das Widget um die Hoch-/Runterzeiten für meine Rollos zu setzen, da wäre es schön für die Hochzeit auch einen Pfeil nach oben zu haben.
Danke

[Garbsen]

Moin

Möchte die Fragen gerne nochmal "nach oben" bringen, da ich bisher immer noch nicht selbst eine Lösung gefunden habe.
Insbesondere das Problem der Schriftgröße des Datetimepicker würde ich gerne gelöst bekommen

[Chuco]

Guten Abend,
Für die Schriftgröße interessiere ich mich auch.
Kann jemand helfen?

Gruß chuco

Habs hinbekommen. In die css einfügen:
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    font-size: 20px;
}