Is there a way to adjust the time font size according to the dimensions 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'm facing an issue with scaling the font size of a time picker based on its size. No matter what adjustments I make in the CSS, the font size is either too big or too small on different devices. Even using 

calc(var(--vw, 1vw) * somenumberhere)
doesn't provide consistent results across devices like Android phones or iPhones.

Even after trying libraries like FitText, the problem persists. The font size may scale slightly better on Chrome, yet displays differently on iPhone models or other mobile browsers.

https://i.sstatic.net/X1juB.jpg

https://i.sstatic.net/Q8wXC.jpg

https://i.sstatic.net/B5Jh9.jpg

https://i.sstatic.net/EDa2I.jpg

Despite various attempts, I am unable to find a solution that works consistently across all devices. Ideally, I want the font size to adjust according to the width of the time picker without being obscured by browser-specific icons like the clock icon in Chrome or the arrow down icon in Safari on iOS.

javascripthtmljquerycssresponsive-design

Answer №1

It is advisable to avoid using vw/vh for styling the input, and instead opt for rem or another relative length unit.

The reason for difficulty in mobile/desktop scaling is due to the varying scale of viewport width/height across devices.

For instance, setting height: 1.25rem maintains a consistent height on different devices, based on the root font-size property at a specific breakpoint.

Setting the font-size of the input as a rem value will also adjust according to the root element's font-size, simplifying the understanding of the relationship between the input's height and font-size.

Example:

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

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

 /* It's recommended not to specify width; if needed, 
 set a max-width or style the parent container with a fixed width/max-width */
 width: 100%; 
 max-width: 300px;
}

In this example, it is clear that the font size aligns with other text elements, while the input's height is one and a half times the text size.

Answer №2

When adjusting the height of a field using vh, it's important to adjust the font size in the same way. Font size should be considered a height, not a width. If you only adjust the width, the text may appear too tall or too short for the box shape. It can be challenging to achieve a visually pleasing form field when the text shape doesn't align with the field geometry.

While I don't have a clear solution to offer, it's worth exploring various options to address the issue at hand. Simply changing one element may not fully resolve the problem, so consider different approaches to find the best fit for your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to partially conceal the H2 text using CSS?

Is there a way to partially hide H2 text using CSS? I have the following code: HTML: <div class="twocol-box1 superflex-content-6-12"> <h2 data-content="My - Text&amp;nbsp;<span style=&quot;float:right;&quot;>M ...

htmlcss

prior to activating a state in angular.js, navigate to a distinct controller

Upon loading my website, I have a specific state in mind that I want to be redirected to. Achieving this is made possible through the following code snippet. angularRoutingApp.run(function ($rootScope, $state, $location, $transitions) { $transitions.o ...

javascriptangularjs

Webpack Error: SyntaxError - an unexpected token found =>

After transferring my project to a new machine, I encountered an error when running webpack --watch: C:\Users\joe_coolish\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186 outputOption ...

javascriptnpmwebpack

In order to have the bot repeat a structure for every user, I would need to utilize both mongoose and discord.js

I am utilizing MongoDB (mongoose) to establish a database for storing user notes in my Discord bot, which is being developed with Discord.JS. This is my "Guild.js" file: const { Schema, model } = require('mongoose'); const Guild = Schema({ i ...

javascriptnode.jsmongoosediscordbots

Extract from Document File

After receiving a PDF through an Angular Http request from an external API with Content Type: application/pdf, I need to convert it into a Blob object. However, the conventional methods like let blobFile = new Blob(result) or let blobFile = new Blob([resul ...

javascripthtmlangulartypescriptblob

Next.js version 13 is causing the page to refresh each time the router is pushed

I am currently developing a search application using NextJs 13, and I have encountered an issue where the page refreshes every time I click the search button. Strangely, this only happens when the application is deployed on Vercel. When running the app l ...

javascriptnext.jsnext.js13nextjs-dynamic-routing

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...

javascriptcssreactjspositioncss-position

focusing on a specialized format using the serialize() method

Following up on my previous question which was answered so promptly by Meder, there is now an additional query that has arisen while creating a reusable jQuery form submission without redirecting the user. Issue The jQuery serialize() function is applyin ...

javascriptjquery-pluginsjqueryjquery-forms-plugin

What is the reason behind jQuery appending a closing tag to the end of the text when adding a table dynamically?

$('#all_locations').append("<table>"); $('#all_locations').append("<tr><th>City</th></tr>"); $.each(data, function(i, item){ $('#all_locations').append("<tr>"); $('#all_locatio ...

jqueryhtmljsonhtml-tableappend

Switching hamburger menu icons in Vue.js

I am trying to change a hamburger menu icon in my header to a cross icon when it is clicked. I have created a function in the computed property of my Vue template, but I'm not entirely sure about the implementation. How can I achieve this? Below is t ...

javascriptvue.jstogglehamburger-menu

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

javascriptjqueryhtml

How do you manage conditional formatting within HTML forms?

On one of my HTML pages, I am using the following code snippet: {% for bet in recent_bets %} {% if bet.status__name == "Won" or bet.status__name == "Half Won"%} <div class="container col recent-form_col bg-success" data-toggle="tooltip" da ...

htmldjango

SignalR 2.2 users are experiencing a lack of message reception

I have developed a unique self-hosted SignalR application that is operating within the framework of a console application. To access the hubs within this application, I have implemented a wrapper class to avoid referencing the SignalR.Core assemblies direc ...

javascriptc#signalr

Specific category of location on Google Maps

I am currently building an application using Cordova and Ionic. I need to implement a map in my app that will display only specific establishments, such as police stations or doctors' offices. This is the code I have so far: var posOptions = {time ...

javascriptangularjscordovagoogle-mapsionic-framework

What is the best way to transfer data from a component to a .ts file that contains an array?

I am currently developing a budgeting application and I have a component that is responsible for holding values that I want to pass to an array stored in a separate file. While I can retrieve data from the array, I am facing difficulty in figuring out how ...

javascriptangulartypescript

Retrieve values from the query string (specifically from table rows and cells) for each individual line and display them in

i have some code, see: <script> $$.ready(function() { // Profile Dialog $( "#user-dialog" ).dialog({ autoOpen: false, modal: true, width: 400, open: function(){ $(this).parent().css('overflow', 'visible') ...

javascriptphpmysql

Get rid of the add to cart message and modify the button that says "add to cart" on Woocommerce

How can I modify the shopping cart page to remove the "has been added to your cart" text and replace the quantity and add to cart button with a custom button (my image)? Here is an example of what I am trying to achieve: This is the current state of the p ...

phpcsswordpresswoocommercecart

Embedding a label's text directly as HTML code in an ASP.NET page

I attempted this CABC</td><td valign="top"><span class="progressBar pb3">document.getElementById('<%#Label8.ClientID%>').innerHTML</span></td></tr> I am trying to incorporate a jQuery script for a sales ...

javascriptjqueryasp.net

Dynamic navigation menu shifting when bolded

Looking at my menu, you'll notice the following layout: If one clicks on Recruitment in the menu, it correctly bolds the text as intended. However, an issue arises where the entire menu unexpectedly shifts 1 or 2px to the left. The menu is implemente ...

xhtmlmenudotnetnukecss

Streaming videos using Flask with a custom template

After successfully implementing the DWA path planning algorithm in C with Python bindings, I have decided to create a web application demo. The concept involves a "robot" following the mouse using DWA, while allowing users to draw walls for objects. My ini ...

javascriptpythonhtmlflask