Search code examples
htmlcssinputcss-grid

Nested CSS grids with not rendering as expected unless the <input> type is "date"

I have simple password-reset form which is not being rendered as expected by Firefox or Chrome on my Ubuntu machine, or by Firefox on my other machine (MacOS). It is, however, rendered as expected by Safari on that other machine. What's really puzzling me is that when the form's <input type="***"> are changed to <input type="date"> the grid rows are rendered as expected.

So is there something special about the <input type="date"> that's resulting in it rendering as expected? Input types of text, email, password, and number all result in the unexpected render (I haven't tried any others).

The original code (not rendering as expected):

form {
  border-radius: 15px;
  margin-top: 15px;
  display: grid;
  justify-self: center;
}

body {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.main-body {
  display: grid;
  grid-template-columns: 1fr;
}

.input-row,
.stores-input-input-row {
  margin: 0px;
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
}

.input-row label {
  text-align: right;
}

.input-block,
.stores-input-input-row {
  padding: 0px;
  margin: 5px;
  border-radius: 5px;
}
<div class="main-body">
  <h3>Reset Password</h3>
  <form action="./password-reset" method="post">
    <div class="input-block">
      <div class="input-row">
        <label for="username">Username:</label>
        <input type="text" name="username">
      </div>
      <div class="input-row">
        <label for="current_password">Current Password:</label>
        <input type="password" name="current_password">
      </div>
      <div class="input-row">
        <label for="new_password">New Password:</label>
        <input type="password" name="new_password">
      </div>
      <div class="input-row">
        <label for="confirm_new_password">Confirm New Password:</label>
        <input type="password" name="confirm_new_password">
      </div>
    </div>
    <input type="submit" name="submit">
  </form>
</div>

The resulting render: Screenshot of render

Changing all the <input> types to "date" gives the following render (what I was expecting with the original): Screenshot of desired render

Solution

  • Not sure why it's working with input type date, but I think the issue with the CSS is on .input-row with the grid-template-columns change this to 1fr 1fr -- it appears as though 0.5fr breaks it. Couldn't find any documentation on this but I also at no point saw floats as fraction units so I'm assuming it's not possible

    form {
  border-radius: 15px;
  margin-top: 15px;
  display: grid;
  justify-self: center;
}

body {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.main-body {
  display: grid;
  grid-template-columns: 1fr;
}

.input-row,
.stores-input-input-row {
  margin: 0px;
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr 1fr;
}

.input-row label {
  text-align: right;
}

.input-block,
.stores-input-input-row {
  padding: 0px;
  margin: 5px;
  border-radius: 5px;
}
    <div class="main-body">
  <h3>Reset Password</h3>
  <form action="./password-reset" method="post">
    <div class="input-block">
      <div class="input-row">
        <label for="username">Username:</label>
        <input type="text" name="username">
      </div>
      <div class="input-row">
        <label for="current_password">Current Password:</label>
        <input type="password" name="current_password">
      </div>
      <div class="input-row">
        <label for="new_password">New Password:</label>
        <input type="password" name="new_password">
      </div>
      <div class="input-row">
        <label for="confirm_new_password">Confirm New Password:</label>
        <input type="password" name="confirm_new_password">
      </div>
    </div>
    <input type="submit" name="submit">
  </form>
</div>