0

I've been developing angular apps for a while now, but recently I found an issue in displaying a basic input with type=date in chrome, and I wonder if there is a css trick that I don't know about to let it work.

What happens when I open the dropdown

As you can see, the Monday column is entirely missing. The code is as simple as it should be, it's basic HTML: 

<input type="date">

And the funny fact is that as soon as I resize the window (for example opening and closing the developers console) it starts working fine.

Do you have any idea on how to solve this?

EDIT: I don't think the issue is with my code at all.

You can look at this snapshot taken from another question here on stackoverflow, and here too the date picker doesn't show correctly

(Link to the question)

connexo
  • 53,704
  • 14
  • 91
  • 128
  • I think it is being affected by its sibling or parent elements by position or z-index. Am not sure though! Can you create a fiddle and add it so that I can help. – Yogaraj Saravanan Jul 05 '19 at 07:47
  • I could, but the issue isn't really with my code! If I go to this other question [link](https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker) and run the snippet of the accepted answer, even there I can't see the monday column... I think this is an issue in chrome itself. @YogarajSaravanan –  Jul 05 '19 at 07:51
  • okay, Check whether you have updated version of the chrome then – Yogaraj Saravanan Jul 05 '19 at 07:53
  • The issue is still probably with your code. I'm unable to reproduce it in Chrome by simply putting an ``. I see all the content. – Kewin Dousse Jul 05 '19 at 07:56
  • Thanks @YogarajSaravanan but before opening this question I disabled all the addons and checked if I'm on the latest version of Chrome, and I am. –  Jul 05 '19 at 07:56
  • @D.Troise Unable to reproduce. Did you try incognito mode? Tested on `Version 75.0.3770.100 (Official Build) (64-bit)`. – Daedalus Jul 05 '19 at 07:58
  • 1
    Looks just fine by me. Chrome 75 : https://i.stack.imgur.com/18bLa.png – Kewin Dousse Jul 05 '19 at 07:59
  • 2
    It seems that the issue is related to my second monitor. When I open my app or anything else on the actual screen of my laptop, it works fine. –  Jul 05 '19 at 08:04

1 Answers1

0

It looks like the issue is more related to my second monitor than to chrome itself. If I open my app or any dropdown on the web from my laptop monitor it shows correctly.

Thank you everybody for the help.

  • Interesting, I guess it could be tied to different pixel density and/or OS zoom level screens. Could that be a Chrome bug in the end, not resizing that kind of "Chrome native" helper ? – Kewin Dousse Jul 05 '19 at 08:20