How to fix the input field height between mobile and desktop views-CodePudding

I am working on a project in which the navbar contains a search input field and button to perform the search. In mobile view, this inline form will be inside the toggle section (I don't know if this is the correct term for this, but the search form will appear when the burger icon is clicked). When the screen width is smaller than 575px, the search input field height becomes bigger than the button height.

The following 2 screenshots demonstrate what I am getting: in mobile view

in desktop view

I used bootstrap 5 and font awesome. This is the code I wrote:

<div >
          <form >
            <input  type="text" placeholder="Search" aria-label="Search">
            <button  type="submit"><span >
                <i ></i>
              </span></button>
          </form>
</div>

How can I make the search button and input field have the same height in mobile view?

CodePudding user response：

The problem is caused by the button top and bottom margins. Using classes my-sm-0 my-2 means that there will be top and bottom margins on mobile only.

Change this...

<button  type="submit">...</button>

...to this.

<button  type="submit">...</button>

See the snippet below.

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <div >
    <form >
      <input  type="text" placeholder="Search" aria-label="Search">
      <button  type="submit">
        <span >
          <i ></i>
        </span></button>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>
</body>

</html>