Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

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

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

vanillajonathan opened this issue Jan 10, 2017 · 6 comments
Labels
confirmed css v4

Comments

@vanillajonathan
Copy link
Contributor

vanillajonathan commented Jan 10, 2017 •
edited
Loading

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
Copy link
Member

bardiharborow commented Jan 11, 2017 •
edited
Loading

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
Copy link
Contributor Author

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
Copy link
Member

Yep, okay. Confirmed on Chrome 56.

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

The issue also exists with datetime-local

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

@sudhirj
Copy link

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
Copy link

sudhirj commented Jan 16, 2017

Actually, will be fixed when #21716 lands.

This was referenced Jan 19, 2017
Closed
Closed
@gijsbotje gijsbotje mentioned this issue Jan 21, 2017
Merged
@mdo mdo mentioned this issue Jan 21, 2017
Closed
@bardiharborow bardiharborow mentioned this issue Feb 8, 2017
Closed
@bardiharborow bardiharborow mentioned this issue Feb 21, 2017
Closed
@IndifferentDisdain IndifferentDisdain mentioned this issue Apr 12, 2017
Closed
@yohummus yohummus mentioned this issue May 27, 2017
Closed
@mdo mdo marked this as a duplicate of #23103 Jul 16, 2017
@mdo mdo mentioned this issue Jul 16, 2017
Closed
datiti added a commit to datiti/coursera-WebFullStack-bootstrap4 that referenced this issue Aug 23, 2017
@datiti
week 2 - assignment - Task 1 & 3
96708e2 
* Task 1: Reserve table form using card
* Task 3: Reserve table button in jumbotron

* add row flex direction for input-group as default in custom css to fix Bootstrap 4.0.0-alpha.6 bug (see issue: twbs/bootstrap#21651)
datiti added a commit to datiti/coursera-WebFullStack-bootstrap4 that referenced this issue Aug 23, 2017
@datiti
week 2 - assignment - Task 2
8d75c6c 
* Task 2: Add image on the right of this month's promotion

* add row flex direction for input-group as default in custom css to fix Bootstrap 4.0.0-alpha.6 bug (see issue: twbs/bootstrap#21651)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed css v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@sudhirj @jasonswearingen @bardiharborow @vanillajonathan