react-datetime-picker
react-datetime-picker copied to clipboard
Leading zero for minutes not aligning with the rest of the digits
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; }
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?
Sorry, no I don't. If I can find some time I'll see what I can do, though.
I've create a codesandbox for another issue, here you can see this bug too:
https://codesandbox.io/s/adoring-ully-bpyqwc
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); }