Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flip clock with hours flipper with no leading 0 and centered #57

Open
MacSass opened this issue Feb 20, 2023 · 1 comment
Open

Flip clock with hours flipper with no leading 0 and centered #57

MacSass opened this issue Feb 20, 2023 · 1 comment

Comments

@MacSass
Copy link

MacSass commented Feb 20, 2023

Hi,
glad I found that flip engine - best I have seen so far. But I´m struggling with one issue:
I´d like to create a 24h flip clock with a flipper for hours and one for minutes - easy so far.
But: I would like the hours to show with no leading "0". E.g. the time of 6:35 should show with just 6 on the flipper and centered on it.

Is this possible? If so - how? If I remove the "pad" then it does show like I want it to, but the flipper size changes to "one digit" wide - I would like to have it always the same size of two digits, even if the hour is just one digit currently.

Thanks in advance - MacSass

@aeleus
Copy link

aeleus commented Mar 23, 2024

I managed to accomplish this by adding the "min-width" value in this CSS to modify the styling of the flip boxes:

/* distance from other flippers */
.tick-flip {
margin-left: .1em;
margin-right: .1em;
min-width: 1.5em;
}

See here for more info: https://pqina.nl/tick/#flip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants