Flexbox issue
Reported by
arthurhe...@gmail.com,
Oct 18 2017
|
||||
Issue descriptionChrome Version : 61.0.3163.100 URLs (if applicable) : https://webs1.arthurheidt.nl/login.html Other browsers tested: Add OK or FAIL, along with the version, after other browsers where you have tested this issue: Firefox: OK What steps will reproduce the problem? The page https://webs1.arthurheidt.nl/login.html should (1) Open https://webs1.arthurheidt.nl/login.html (2) Open it in mobile view, now the "gebruikersnaam" is stacked on top of the input (3) Open it in tablet view, now "gebruikersnaam" is left from the input, both " elements" of input and label are still stacked (4) Open it in desktop view, now nothing happens bot the "gebruikersnaam" and the "wachtwoord" element are still stacked on top of each other. What is the expected result? The elements should be in a row What happens instead? They are in a column Please provide any additional information below. Attach a screenshot if possible.
,
Oct 25 2017
,
Oct 26 2017
Unable to reproduce the issue on Windows 7 & Mac 10.12.6 Using chrome reported version-61.0.3163.100, stable-62.0.3202.62 & canary-64.0.3250.0 as per steps provided in C#0. Step#4, In Desktop view both the elements(Username & password) are displayed in a row.Not in a column. Could you please check the issue on clean profile & by upgrading chrome to latest versions . If still issue observed, it would be more helpful if you provide us a screencast which describes the issue & OS details. Please find the attached screencast for reference. Thanks in advance..!
,
Dec 4 2017
Due to lack of user feedback closing this issue. Please feel free to raise a new one if you find any chrome issue further. Thanks..! |
||||
►
Sign in to add a comment |
||||
Comment 1 by arthurhe...@gmail.com
, Oct 18 2017Maybe some more info is handy: This form is design in the way of <form> <fieldset> <div> <label> <input> Now on the mobile view, all elements should be stacked underneath each other. So the CSS would look something like this: form{ display: flex; flex-direction: column } fieldset { display: flex; flex-direction: column; } fieldset > div{ display: flex; flex-direction: column; } On the tablet view, the labels and the inputs should be stacked next to each other, since I am a student who has to use a mobile-first css, I created a media query somewhat like this: @media all and (min-width: 481px){ fieldset > div { flex-direction: row; } } Now on desktop, the divs in the fieldset should be stacked next to each other. Thus I created a media query somewhat like this: @media all and (min-width: 1024px){ fieldset{ flex-direction: row; /*No need to do anything to the div's, the tablet query is already executed on the desktop view*/ } } Now this does seem to work on firefox, but the last query does not function properly on chrome. What is strange is that in the dev tools, on desktop view, you can actually see that the div-element has a styling property "flex-direction: row", but it does not appear to have any effect on the rendered webpage.