Question 44635 in Html Question posted in
Some basic documentation can be found here.

button element should have the same height as the input field – Html

In my example i have a wrapper div which has position: relative

The input field has a width of 100% and the button was placed on the right end of the input field. For this i used position: absolute

The button should have the same height as the input. Why is the button a little bit bigger as the input field? Is there any css statement to fix this issue?

.wrapper {
    position: relative;
  max-width: 400px;
}

.wrapper textarea {
    background-color: white;
    border: 1px solid #666;
    color: #999;
    border-radius: 7px;
    padding: 9px 10px;
    width: 100%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
  font-size: 14px;
  font-weight: normal;
    font-family: Roboto;
}

.wrapper button[type=submit] {
    position: absolute;
    right: 0;
    top: 0;
    min-height: 37px;
    height: 100%;
    width: 43px;
    line-height: inherit !important;
    border: unset;
    background: red;
    border-radius: 0 6px 6px 0;
}
<div class="wrapper">
        <textarea type="text" placeholder="Placeholder"></textarea>
        <button type="submit"><i class="fas fa-search"></i></button>
</div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    vertical-align: top; remove bottom padding of textarea


  2. 0

    Change your textarea to an input Tag and give it a height

    Login or Signup to reply.
  3. 0

    If you set the wrapper to display: grid, the default behavior is for the grid children to stretch along both axes.

    * {
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
}

.wrapper {
  display: grid;
  max-width: 25rem;
  position: relative;
}

.wrapper textarea {
  background-color: white;
  border: 1px solid #666;
  border-radius: .5rem;
  color: #999;
  display: block;
  font: inherit;
  padding: .5rem .75rem;
}

.wrapper button[type=submit] {
  border: 1px solid;
  border-radius: 0 .5rem .5rem 0;
  color: #666;
  font-size: 1.25rem;
  inset: 0 0 0 auto;
  position: absolute;
  width: 3rem;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="wrapper">
  <textarea type="text" placeholder="Placeholder"></textarea>
  <button type="submit"><i class="fa fa-search"></i></button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search