Leading zero for minutes not aligning with the rest of the digits

[thoffmann-fms]

trafficstars

Great widget, thanks!

When the Time has a leading zero, it does not align with the rest of the digits, the leading zero is lower. <Stack className="SPHGrid-container" tokens={{ childrenGap: "4px" }}> ..snip.. <div className="SPHGrid-DataLeft-item" style={{ gridRow: 2 }}> <Stack horizontal={true} verticalAlign="center" tokens={{ childrenGap: "3px" }}> <DateTimePicker aria-labelledby="lblPickerEndDate" value={thisState.endDate} onChange={this.OnEndDateChange} locale={CurrentLanguage} minDate={new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())} maxDate={new Date(new Date(2078, 1, 1))} // constrained by smalldatetime range in SQL table disabled={CV.OrderIsLocked} clearIcon={null} disableClock={true} calendarIcon={<Icon iconName="Calendar" />} /> {endRangeError} </Stack>

.SPHGrid-container { margin-top: 8px !important; display: grid; grid-template-columns: 20% 30% 20% 30%; padding: 2px; align-items: center; }

.SPHGrid-DataLeft-item { grid-column: 2; }

I fixed it by adding the following CSS to my app .css file.

.react-datetime-picker__inputGroup__leadingZero { padding-bottom: 1px; }

[wojtekmaj]

It could have been caused by line-height you have applied in your app affecting React-DateTime-Picker's styles. That should indeed not happen. Do you by any chance have a reproducible example on CodeSandbox?

[thoffmann-fms]

Sorry, no I don't. If I can find some time I'll see what I can do, though.

[ingro]

I've create a codesandbox for another issue, here you can see this bug too:

https://codesandbox.io/s/adoring-ully-bpyqwc

[franferdez]

If somebody else is experiencing this issue. I manage to fix it by adding the following class to my custom sass. But is the same for CSS. react-datetime-picker__inputGroup__leadingZero { margin-left: -$digit-width; padding-left: calc(1px + $digit-width); }