Change input styling in vaadin-date-time-picker.

Hilla
1

Hi guys,
I am not able to style the input fields within the date-time-picker.
I have tried several options including :
:host(#myField)[part~=‘input-field’] {
width: 100px;
}

The above approach works alright for vaadin-text-fields though.

I would appreciate any suggestions. Thank you…

2

What’s the name of the CSS file and where did you put it?

3

@adaptable-uakari , It is vaadin-date-time-picker.css and I have placed it inside my themes/myTheme/components

4

to style the input the filename must be. vaadin-date-time-picker-date-text-field.css

5

Thank you @adaptable-uakari, unfortunately it made no change.

6

I changed the name of the file accordingly and my simple css is :host(.date-time)[part=‘input-field’] {
width: 100px;
}

7

What exactly do you want to do? Only set the widht of the datepicker?

8

Then you can do that in Java by calling setWidth

9

I am working with TypeScript :). I have this 2 date-time-pickers. which are exceptionally big and take way 2 much space from a little widget. I want to make each input smaller and also adjust the font size, in order to fit things better.
unknown.png

10

ah you are using dateTimePicker!

11

I can style the container for the , however changing the width/height in that one breaks the design of the inputs within. What does not work for me, is accessing the [part=‘input-field’]

12

sorry

13

:slightly_smiling_face:

14

vaadin-date-time-picker-date-text-field.css

15

vaadin-date-time-picker-time-text-field.css

16

That are the component css

17

hmm, let’s see :slightly_smiling_face:

18

I assume the css selector should be just :host[part=‘input-field’]{…} in this case

19

:host [part=“input-field”]

20

yep, still no change. the default options are still unchanged