search

codyhouse / codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.
https://codyhouse.co/
MIT License
1.16k stars 173 forks source link

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

Closed lro-tiierisch closed 1 year ago

lro-tiierisch commented 2 years ago

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 1 year ago

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.

lro-tiierisch commented 1 year ago

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