CODEWITHSUNDEEP
javascripthtmljquerycssresponsive-design
user12558632
user12558632

Reputation: 67

How do I scale the time font size based on the size of the time picker?

HTML and CSS

.pickthetime {
  height: calc(var(--vh, 1vh) * 3);
  width: calc(var(--vw, 1vw) * 25);
  align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS
  font-weight: 300;
}
<input class="pickthetime" type="time" id="pickthetime" name="pickthetime" required />

I have the actual picker set to a certain size as you can see on the CSS. No matter what I do, I can't seem to scale the font size automatically based on the size of the time picker. If I increase or decrease the font size too much using calc(var(--vw, 1vw) * somenumberhere) it's always too big or too small on some devices. Some font sizes work well on my Android phone, but then it won't work with my iPhone 11 or (using the Chrome device toolbar) iPhone X.

I have also tried to use FitText but the same issue occurs. It does scale a bit better on Chrome (using device toolbar) or on my Android phone.

iPhone X using Chrome device toolbar (too small)

iPhone X using Chrome device toolbar (too big)

iPhone 11 (too big, and for some reason breaks a line)

iPhone 11 (too small)

I...don't know what to try from here. What works on 1 device, doesn't work on the other 2. All I want is for the font size of the time to render according to the width of the time picker (but I don't want it to become hidden by the little clock icon that browsers like Chrome or the arrow down icon that browsers like Safari on iOS use).

Upvotes: 0

Views: 730

Answers (2)

user4945014
user4945014

Reputation:

If you set the height of the field based on vh, you need to set the font size the same way. Font size is a height, not a width. If you set the width, depending on the width of the form field your text will either be too tall or too short for the box. I'm not really sure how you would want the form field to look when the shape of the text doesn't match the geometry of the form field.

I know this isn't really an answer, but the problem you've described has no solution. For a change that would help you can refer to another answer but I don't want to just say "Do this instead" because there are a lot of options depending on what you want.

Upvotes: 1

geoffdavis
geoffdavis

Reputation: 142

I would suggest not using vw/vh for styling the input, and instead using rem or another relative length unit.

This is why you're having trouble with mobile/desktop scaling: because the scale of the viewport width/height is so different between devices.

Using for example height: 1.25rem keeps the height relatively static across devices, depending on the root font-size property at a given breakpoint.

Assigning a rem value as the font-size of the input itself will likewise scale with the root element's font-size, and make it easier for you and other developers to understand the relationship between the input's height and its font-size.

Example:

/* Let's say the <body> has a font-size of 20px */
body {
  font-size: 20px; /* 20px = 1rem */
}

.pickthetime {
  font-size: 1rem; /* or 1x body's font-size = 20px */
  height: 1.5rem; /* or, 1.5x body's font-size = 30px */

  /* I would suggest not setting a width; if you do, 
      set a max-width as well, or style the containing
      element with a set width/max-width */
  width: 100%; 
  max-width: 300px;
}

In the above example, you can now tell that the font size will be the same as the rest of the text, and also that the height of the input element will be 1 and a half times the size of your text.

Upvotes: 2

Related Questions