Material Design Widgets: Input, Select, Autocompl.

[Scrounger]

@0018
Unter CSS Test auf zentrieren stellen

@etv sagte in Material Design Widgets: Input, Select, Autocompl.:

Was trage ich bei der Mask ein wenn ich nur Buchstaben große und klein haben möchte? Ich bekomm's nicht zusammen.....

Hier ist dokumentiert, welche Mask zulässig sind:
https://vuejs-tips.github.io/vue-the-mask/

Muss ich mal noch mit in die Doku aufnehmen

[0018]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

@0018
Unter CSS Test auf zentrieren stellen

Wenn du im Reiter "CSS Font & Text" unter CSS "text-align = center" meinst, funktioniert es leider nicht.

Hier mein Widget:

Spoiler

[{"tpl":"tplVis-materialdesign-Input","data":{"oid":"javascript.0.Rolladen.Bad.Timer.Hoch_Uhrzeit_WE","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","inputType":"time","inputLayout":"outlined-rounded","showInputMessageAlways":false,"showInputCounter":false,"clearIconShow":false,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"inputMaxLength":"","inputMask":"","inputLayoutBackgroundColor":"#37474F","inputLayoutBackgroundColorHover":"","inputLayoutBorderColor":"#63a4ff","inputLayoutBorderColorHover":"#FFCA28","inputTextColor":"#ffffff","inputLabelText":"","inputMessage":"","inputLayoutBorderColorSelected":""},"style":{"left":"300px","top":"130px","width":"120px","height":"40px","z-index":"10","text-align":"center"},"widgetSet":"materialdesign"}]

[Scrounger]

@0018 #
Dann geht es nur mit css klasse überschreiben.
Alternativ kannst auch nen Issue auf github erstellen, dann bau ich die funktion mal in den editor ein.

[0018]

@Scrounger

Danke! Da ich keinen Plan von CSS habe, könntest du mir vielleicht den Code dazu nennen?

[0018]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

Alternativ kannst auch nen Issue auf github erstellen, dann bau ich die funktion mal in den editor ein.

Erledigt, GIT

Kannst du mir als workaraound evtl den CSS Code zur Verfügung stellen, damit ich meine Vis schon mal fertig machen kann?

[0018]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

Dann geht es nur mit css klasse überschreiben.

Kannst du mir vielleicht beschreiben wie ich den css-code überschreiben kann?

[oxident]

Hi!
Kann man beim Select-Widget irgendwie den Knopf zum Löschen des Wertes ("X") ausblenden? Habe das Problem, dass sonst der DP immer auf einen leeren String gesetzt werden würde.

Sorry, erledigt. Unter "Symbole" gibt es die Option "Symbol zum Löschen des Textes anzeigen".

[Coffeelover]

Hi,

wie muss ich das Select Widget für Datumswerte konfigurieren?

VG

[0018]

@Scrounger ist es möglich das du mir den css code nennst um die Uhrzeit im widget zu zentrieren?

[Scrounger]

@0018 sagte in Material Design Widgets: Input, Select, Autocompl.:

@Scrounger ist es möglich das du mir den css code nennst um die Uhrzeit im widget zu zentrieren?

.v-select__selection.v-select__selection--comma{
    width: 100%;
    text-align: center;
}

[Coffeelover]

@Coffeelover sagte in Material Design Widgets: Input, Select, Autocompl.:

wie muss ich das Select Widget für Datumswerte konfigurieren?

Ich antworte mal selbst: Im Prinzip ist die Einstellung total banal. Während ich in Android (Fully) dann auch den Datumsdialog bekomme, muss ich am WIN-Rechner die Infos selbst eintippen.

[0018]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

.v-select__selection.v-select__selection--comma{
width: 100%;
text-align: center;
}

@Scrounger Danke dir!

Kann es sein das du hier auf das select-widget den Code geschrieben hast? Es funktioniert leider nicht. Ich verwende das Input widget mit dem InputType = time, vielleicht liegt es daran?

ich hab mal ein wenig rum probiert und z.B:

.v-text-field__slot{
    text-align: center;
}

verwendet, aber keine Änderung. Wie müsste die richtige Zuweisung sein?

[0018]

@Scrounger ?

[saeft_2003]

In dem roten Bereich sieht man ganz leicht eine schwarze Uhr. Diese hätte ich gerne in der Farbe weiß.

Kann mir einer von euch sagen wo man die Farbe umstellen kann, ich habe lange gesucht aber es nicht gefunden

[0018]

@0018 sagte in Material Design Widgets: Input, Select, Autocompl.:

Kann es sein das du hier auf das select-widget den Code geschrieben hast? Es funktioniert leider nicht. Ich verwende das Input widget mit dem InputType = time, vielleicht liegt es daran?

@Scrounger könntest du dir den Code evtl nochmal ansehen?

[Scrounger]

@0018

.v-text-field__slot > input {
    text-align: center;
}

[0018]

@Scrounger
danke das hat soweit geklappt. Allerdings funktioniert das nur auf meinem Win10 Rechner unter Chrome. Auf meinem Andoid-Tablet im Fully-Browser hat das leider keine Änderung gebracht. Hast du eine Idee warum das im Fully nicht klappt?

[saeft_2003]

@saeft_2003 sagte in Material Design Widgets: Input, Select, Autocompl.:

In dem roten Bereich sieht man ganz leicht eine schwarze Uhr. Diese hätte ich gerne in der Farbe weiß.

Kann mir einer von euch sagen wo man die Farbe umstellen kann, ich habe lange gesucht aber es nicht gefunden

@Scrounger

weißt du das vielleicht?

[Scrounger]

@0018 sagte in Material Design Widgets: Input, Select, Autocompl.:

@Scrounger
danke das hat soweit geklappt. Allerdings funktioniert das nur auf meinem Win10 Rechner unter Chrome. Auf meinem Andoid-Tablet im Fully-Browser hat das leider keine Änderung gebracht. Hast du eine Idee warum das im Fully nicht klappt?

.v-text-field__slot > input {
    text-align: center !important;
}

müsste aber eigentlich gehen.

@saeft_2003 sagte in Material Design Widgets: Input, Select, Autocompl.:

@Scrounger

weißt du das vielleicht?

Ne leider nicht, wie hast du denn diese Uhr da rein bekommen?

[Conquest]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

Ne leider nicht, wie hast du denn diese Uhr da rein bekommen?

Hab bei mir auch diese Uhr. Scheint mit einem Update von Chrome gekommen zu sein. Kann man das entfernen?
Gerade nachgesehen hängt definitiv an Chrome bei Firefox ist keine Uhr.