CODEWITHSUNDEEP
cssgoogle-chromecss-grid
Pop-A-Stash
Pop-A-Stash

Reputation: 6652

CSS Grid Layout Strange Behavior on Window Resize

Chrome Version 60.0.3112.78 (Official Build) (64-bit) in Windows 7

I'm exploring CSS Grid layout and have come across an odd issue in Chrome (works fine in Firefox). I've created a simple registration form that I want to center horizontally and vertically on the page.

I use three nested grids to structure my layout.

html {
  height: 100%;
}
body {
  font-family: 'Rubik', sans-serif;

  margin: 0;
  padding: 0;
  background: #aaffff;
  height: 100%;
}
#root {
  height: 100%;
}

button,
input,
label {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
}
label {
  display: inline-block;
  text-align: left;
}
.formGroup {
  display: inline-block;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
a:link {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: underline;
}

*:focus {
  outline-width: 3px;
  outline-color: rgba(66, 66, 66, 0.7);
  outline-style: dashed;
  outline-offset: 3px;
}

.Input {
  color: #333;
  border: none;
  height: 2em;
  padding: 5px 10px;
  display: block;
  /* width: 100%; */
}
.Input:focus {
  outline-width: 3px;
  outline-color: rgba(66, 66, 66, 0.7);
  outline-style: dashed;
  outline-offset: 3px;
}

.Button {
  display: inline-block;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: 20px 40px;
  border-radius: 4px;
  border: none;
  background: none;
  position: relative;
  text-transform: uppercase;
  margin: 15px 30px;
}

.Button.primary {
  background: #0000ff;
  box-shadow: 0 9px #000088;
  color: #fff;
}
.Button.primary:hover {
  top: 5px;
  box-shadow: 0 4px #000088;
}
.Button.primary:active {
  top: 9px;
  box-shadow: none;
}
.Button.primary:focus {
  outline-width: 3px;
  outline-color: rgba(0, 0, 255, 0.7);
  outline-style: dashed;
  outline-offset: 3px;
}

.RegistrationForm-container {
  display: grid;
  grid-template-columns: 3% auto 3%;
  grid-template-rows: 100px 25% auto 25%;
}
.RegistrationForm-container .copy {
  grid-column-start: 2;
  grid-row-start: 2;
}

.RegistrationForm-container form {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  display: grid;
  grid-template-columns: 1% auto 1%;
  grid-template-rows: 25px auto 25px;
}

.RegistrationForm-container form .inner {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: 1% auto 1%;
  grid-template-rows: 50px 50px;
}
.RegistrationForm-container form .inner .emailFormGroup {
  grid-column-start: 2;
  grid-row-start: 1;
  margin: 0 auto;
}
.RegistrationForm-container form .inner .buttonFormGroup {
  grid-column-start: 2;
  grid-row-start: 2;
}
.App {
  text-align: center;
  height: 100%;
}
<div id="root">
  <div class="App">
    <div class="RegistrationForm-container">
      <div class="copy">
        <h1>Register</h1>
        <p>
          By registering, you agree to our
          <a href="/terms">terms of use and privacy policy</a>.
        </p>
      </div>
      <form>
        <div class="inner">
        
          <div class="formGroup emailFormGroup">
            <input
                   class="Input"
                   type="email"
                   placeholder="Email"
                   autocorrect="false"
                   />
          </div>
          <div class="formGroup buttonFormGroup">
            <button type="submit" class="Button primary">
              Submit
            </button>
          </div>
          
        </div>
      </form>
    </div>
  </div>
</div>

While, my grid layout does succeed centering, it misbehaves when the window is resized. When the window is resized larger than the original load size, and then narrowed, a scrollbar appears and the input and button get stuck off to the right.

Only after clicking somewhere in the page or tabbing between the button, input, and terms of use link will it correct itself and snap back into vertical/horizontal centeredness.

Here are demonstrations of the behavior:

https://codepen.io/jdoyle/pen/qXadXJ

https://plnkr.co/edit/rzAAAsfgPVUfxxmXlqYa?p=preview

enter image description here

Upvotes: 1

Views: 2868

Answers (1)

Don
Don

Reputation: 4157

Looks like margin:auto in a grid does start to act pretty weird.

A way to get the effect you want but avoiding the bug would be to set

text-align: center;

on the emailFormGroup and then remove the display: block on email input.

https://codepen.io/anon/pen/YxGyeG

Upvotes: 1

Related Questions