<input type="date"> inside .input-group renders incorrectly in Chrome. #21651

Closed
vanillajonathan opened this Issue Jan 10, 2017 · 6 comments

Projects

None yet

4 participants

@vanillajonathan
Contributor
vanillajonathan commented Jan 10, 2017 edited

Bootstrap 4 alpha6 on Chrome 55 on Windows.
Renders properly in Firefox and Edge.

Test case

https://jsbin.com/pomicuyiza/1/edit?html,output

Screenshot

image

@bardiharborow
Member
bardiharborow commented Jan 11, 2017 edited

Please check your testcase. It doesn't contain an input group or a submit button as per the screenshot, which leads me to believe you've posted the wrong code. Per this StackOverflow question, support for <input type="datetime"> has been removed from most browsers, so the element renders the same as any other textbox (confirmed in Chrome 56). <input type="datetime-local">, however, is supported by Chrome and displays correctly.

@vanillajonathan
Contributor

Sorry, that test case somehow got wrong. To clarify I am referring to type date, not datetime or datetime-local.

Test case

https://jsbin.com/pomicuyiza/1/edit?html,output

@bardiharborow
Member

Yep, okay. Confirmed on Chrome 56.

@bardiharborow bardiharborow changed the title from Inline form with date inside input-group renders incorrectly in Chrome to <input type="date"> inside .input-group renders incorrectly in Chrome. Jan 11, 2017
@jasonswearingen

The issue also exists with datetime-local

please see this testcase: https://jsbin.com/kihosoviyu/1/edit?html,output
running chrome on windows.

@sudhirj
sudhirj commented Jan 16, 2017

Fix is to change .input-group .form-control to flex-direction: row;. It's currently column, which I think makes the elements inside the date text box layout vertically.

@sudhirj
sudhirj commented Jan 16, 2017

Actually, will be fixed when #21716 lands.

@mdo mdo closed this in #21716 Jan 21, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment