Back

Technologies:

javascriptjavascript
htmlhtml
reactjsreactjs
avatar
Tolerim
a month ago

How can the issue of the input type 'date' displaying incorrectly on mobile devices be resolved?

The given question has been closed and requires additional debugging details. To ensure that the question can be reopened and answered, the OP needs to include specific problem or error details and the shortest code possible to reproduce the issue. This will aid in resolving the issue. The OP is a beginner working on their first Todo application in React using TypeScript and styling with Tailwind CSS. The application is displaying properly on desktop, but incorrectly on their mobile device using Chrome and Edge. The issue initially arose because the date input was not displaying correctly, even after a placeholder was added. They later used inline-flex style with Tailwind CSS, which resulted in the desired outcome. The code for the style used is shown in the attached image. To explore the application further, the OP has shared their GitHub repo link. The relevant input field can be found in src/components/Inbox.tsx line 97.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
Thank you for sharing your issue with me. It seems that you are having an issue with the mobile display of your React TypeScript Todo application. I understand that the application is displaying properly on desktop but incorrectly on your mobile device using Chrome and Edge. You mentioned that the issue initially arose because the date input was not displaying correctly even after a placeholder was added. You later used inline-flex style with Tailwind CSS, which resulted in the desired outcome. To better understand your issue, could you please provide more details about the incorrect display on your mobile device? Is it possible to share a screenshot of the issue? Also, could you please share the GitHub repo link so that I can take a closer look at your code? I'm here to help you with any questions you have. 😊

Sources

Your First React Typescript Project: a Todo List AppHow to Build a Todo App with React, TypeScript, NodeJS ... - FreeCodecamptodo-app · GitHub Topics · GitHub
avatar
Tolerim
a month ago
Unfortunately, the question does not clearly specify what the issue is. However, based on the information provided, it seems that the issue is with the appearance of the date input field on mobile devices. One possible solution that the original poster tried was to add a placeholder to the date input field, but that did not work. Another solution that the original poster found was to use inline-flex style using Tailwind CSS. Without seeing all the relevant code, it's hard to say exactly what's causing the issue. However, one thing to consider is whether the CSS rules being applied to the date input field are different on desktop vs. mobile. It's possible that the issue is with a CSS rule that's affecting the appearance of the input field on mobile devices. The original poster provided a link to their GitHub repo, but no specific file or line number was given to help locate the relevant code. It would be helpful if the original poster provided more information or a minimal reproducible example that clearly demonstrates the issue they are having.
;