New issue
Advanced search Search tips

Issue 891520 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Closed: Oct 9
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

<input type="date"> render with different width when the max attribute is provided

Reported by jon.dufr...@gmail.com, Oct 2

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Example URL:

Steps to reproduce the problem:
Given the following HTML

```
<!doctype html>
<head>
  <meta charset="utf-8"/>
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('input[type=date]').each(function() {
        var $this = $(this);
        console.log(this);
        console.log($this.width());
        console.log($this.outerWidth());
      });
    });
  </script>
</head>
<body>
  <div><input type="date"></div>
  <div><input type="date" max="2020-01-01"></div>
</body>
```

The two date inputs render with a different width. I expect them to be the same. The console output was:

```
test.html:10 <input type=​"date">​
test.html:11 148.859
test.html:12 153.859
test.html:10 <input type=​"date" max=​"2020-01-01">​
test.html:11 132.859
test.html:12 137.859
```

When there are multiple date inputs on page -- and only a subset have a max attribute -- the difference causes an awkward visual experience for the user.

What is the expected behavior?
The max attribute should not affect the width of the date input.

What went wrong?
The date inputs rendered with different widths.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 69.0.3497.100  Channel: stable
OS Version: 
Flash Version:
 
Rendered date inputs.
chrome-date-input.png
44.1 KB View Download
Labels: Needs-Triage-M69 Needs-Bisect
Cc: vamshi.kommuri@chromium.org
Components: Platform>DevTools
Labels: -Type-Compat -Needs-Bisect Triaged-ET Target-71 M-71 FoundIn-71 FoundIn-70 FoundIn-69 OS-Mac OS-Windows Type-Bug
Status: Untriaged (was: Unconfirmed)
Thanks for filing the issue!

Able to reproduce the issue on reported chrome  version 69.0.3497.100 and on the latest canary 71.0.3567.0 using Ubuntu 14.04, Windows 10 and Mac 10.13.1

As the issue issue is seen from M60(60.0.3112.0) considering it as Non-Regression and marking it as Untriaged.
Components: -Platform>DevTools Blink>Forms>Date
Owner: tkent@chromium.org
Status: WontFix (was: Untriaged)
This is an intentional behavior.  The intrinsic width depends on the maximum length of the content, that is to say, maximum digits of max year. If max= attribute is missing, max year is 275760.

Sign in to add a comment