Input field does not adjust to div width

Question

So I have this very simple grid layout that has 3 columns. The 3rd column has 3 items which are a header, a div and an input element.

Setting the width=100%; for the input I thought it would fit to the 3rd columns actual size but apparently it grows bigger than the div.

I thought it would be the padding of the conversation div but it turns out that even after removing the padding there is still an overlap.

EDIT: The input item should only take the length of the 3rd column.

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 9fr;
}

.directories {
  background-color: rgb(17, 200, 110);
}

.chats {
  background-color: rgb(220, 220, 120);
  height: 100vh;
}

.conversation {
  background-color: rgb(220, 20, 120);
  padding: 8px; 
  position: relative;
}

.conversation-head {
  position: sticky;
  top: 0;
  background-color: white;
}

input {
  min-width: 100%;
  max-width: 100%;
  height: 32px;
  position: absolute;
  bottom: 5px;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div class="wrapper">

    <div class="directories">
      Something Something
    </div>
    <div class="chats">
      Chat Chat Chat
    </div>
    <div class="conversation">

      <div class="conversation-head">
        Front-End
      </div>
      <div class="conversation-txt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
      </div>

      <input type="text" placeholder="Enter your message">

    </div>

  </div>

</body>

</html>

score 1 · Accepted Answer · answered Nov 14 '19 at 13:39

Instead of position:absolute you can rely on a flexbox container where it will be easier to position the input and size it

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 9fr;
}

.directories {
  background-color: rgb(17, 200, 110);
}

.chats {
  background-color: rgb(220, 220, 120);
  height: 100vh;
}

.conversation {
  background-color: rgb(220, 20, 120);
  padding: 8px; 
  position: relative;
  display:flex; /* added*/
  flex-direction:column; /* added*/
}

.conversation-head {
  position: sticky;
  top: 0;
  background-color: white;
}

input {
  width: 100%; /* added*/
  box-sizing:border-box; /* added*/
  height: 32px;
  margin:auto 0 5px; /* added*/
}

<div class="wrapper">

    <div class="directories">
      Something Something
    </div>
    <div class="chats">
      Chat Chat Chat
    </div>
    <div class="conversation">

      <div class="conversation-head">
        Front-End
      </div>
      <div class="conversation-txt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
      </div>

      <input type="text" placeholder="Enter your message">

    </div>

  </div>

This works perfectly fine but I don't really understand how the input eventually ends up at the bottom of the div? Obviously `margin: auto 0 5px;` is involved but how come the `input` gets pushed down when the div above doesn't even require that space yet? — Ixtan, Nov 14 '19 at 13:54
@Ixtan it's the auto margin that push the element to the bottom, a feature in Flexbox https://stackoverflow.com/q/32551291/8620333 — Temani Afif, Nov 14 '19 at 13:56

score 0 · Answer 2 · answered Nov 14 '19 at 13:39

0

You should remove the position:absolute of input , the position absolute is relative to the parent(with position relative) and ignore the padding of the parent element

answered Nov 14 '19 at 13:39

Caro

612
5
10

score -1 · Answer 3 · answered Nov 14 '19 at 13:30

-1

use this

input{
  box-sizing: border-box;
  left:0;
  right:0;
}

hopefully, this is work

answered Nov 14 '19 at 13:30

Ahsan Abrar

139
3
13

Input field does not adjust to div width

3 Answers3