codyhouse/codyhouse-framework

HTML inputs with date-related type attribute are slightly higher than others

lro-tiierisch opened this issue · 2 comments

lro-tiierisch commented

The height of an input element with type date, month etc. doesn't match the height of other input elements like e.g. text or search.

Capture

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
  <link rel="stylesheet" href="assets/css/style.css">
  <title>Get Started | CodyFrame</title>
</head>

<body class="bg-black">
  <form>
    <div class="grid gap-xs bg-error margin-sm width-25%">
      <div class="col-6@md">
        <label class="form-label margin-bottom-xxxs" for="full-name">Full name</label>
        <input class="form-control width-100%" type="text" name="full-name" id="full-name">
      </div>

      <div class="col-6@md">
        <label class="form-label margin-bottom-xxxs" for="date-of-birth">Date of birth</label>
        <input class="form-control width-100%" type="date" name="date-of-birth" id="date-of-birth">
      </div>
    </div>
  </form>
</body>

</html>
sebastiano-guerriero commented

Hi, this is not a bug related to the framework, but it depends on how some browsers render some input fields (e.g., date) with the same padding as any other input.

One way to solvi this:

<form>
  <div class="grid gap-xs bg-error margin-sm width-25%">
    <div class="col-6@md flex flex-column">
      <label class="form-label margin-bottom-xxxs" for="full-name">Full name</label>
      <input class="form-control width-100% flex-grow" type="text" name="full-name" id="full-name">
    </div>

    <div class="col-6@md flex flex-column">
      <label class="form-label margin-bottom-xxxs" for="date-of-birth">Date of birth</label>
      <input class="form-control width-100%" type="date" name="date-of-birth" id="date-of-birth">
    </div>
  </div>
</form>

I've added .flex and .flex-column to the input wrapper, and .flex-grow to the smaller input.

  • 👍1
lro-tiierisch commented

You are right. In Firefox the elements have the same height, but not in Chrome. Thanks for the suggested fix, it's working like a charm. 😊