New issue
Advanced search Search tips

Issue 776091 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Flexbox issue

Reported by arthurhe...@gmail.com, Oct 18 2017

Issue description

Chrome 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.

 
Maybe 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.


Components: Blink>Layout
Cc: jmukthavaram@chromium.org
Labels: Needs-Milestone Needs-Feedback
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..!
776091.mp4
3.0 MB View Download
Status: WontFix (was: Unconfirmed)
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