2

Like in Whatsapp, I want to make a writing field that grows upwards.

I've the below codes.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #262626;
}

.tel {
  margin: 20px auto 0;
  width: 300px;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  position: relative;
}
.tel .screen {
  width: 280px;
  height: 400px;
  background: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
  left: 50%;
  position: absolute;
  top: 50px;
  transform: translate(-50%, 0);
}
.tel .screen .nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  background: #075E54;
}
.tel .screen #inp {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 225px;
  min-height: 37px;
  border-radius: 50px;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 2px 10px;
  resize: none;
}
.tel .screen #inp::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tel .screen .voice {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: #00897B;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tel .speaker {
  width: 50px;
  height: 4px;
  background: #a0a0a0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 25px;
  border-radius: 2px;
}
.tel .touch {
  height: 30px;
  width: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: conic-gradient(#b3b3b3 0%, #a0a0a0 50%, #b3b3b3 50%, #a0a0a0 100%);
  border-radius: 50%;
  bottom: 10px;
}

i {
  color: #fff;
  font-size: 14px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="tel">
  <div class="speaker"></div>
  <div class="screen">
    <div class="nav"></div>
     <textarea type="text" id="inp"></textarea>
    <div class="voice">
      <i class="material-icons">keyboard_voice</i>
    </div>
  </div>
  <div class="touch"></div>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
  • 1
    First you need a `textarea` to allow multiline input. Then you need some JavaScript to detect the text being more than one line and change the height accordingly. – Niet the Dark Absol Jan 26 '19 at 21:33
  • 2
    (The code you've provided is completely irrelevant to the question; all you have here is an input field with a bunch of decorative stuff around it. Have you made any attempt at solving the autofit you're asking about?) – Daniel Beck Jan 26 '19 at 21:35
  • @DanielBeck yes? I tried with textarea but nothing has changed. – doğukan Jan 26 '19 at 21:37

1 Answers1

10

I would use a contenteditable div that you simply put at the bottom and it will behave like expected

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #262626;
}

.tel {
  margin: 20px auto 0;
  width: 300px;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  position: relative;
}
.tel .screen {
  width: 280px;
  height: 400px;
  background: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
  left: 50%;
  position: absolute;
  top: 50px;
  transform: translate(-50%, 0);
}
.tel .screen .nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  background: #075E54;
}
.tel .screen #inp {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 225px;
  min-height: 37px;
  border-radius: 50px;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 2px 10px;
}
.tel .screen .voice {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: #00897B;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tel .speaker {
  width: 50px;
  height: 4px;
  background: #a0a0a0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 25px;
  border-radius: 2px;
}
.tel .touch {
  height: 30px;
  width: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: conic-gradient(#b3b3b3 0%, #a0a0a0 50%, #b3b3b3 50%, #a0a0a0 100%);
  border-radius: 50%;
  bottom: 10px;
}

i {
  color: #fff;
  font-size: 14px;
}

div.edit {
  position: absolute;
    bottom: 4px;
    left: 5px;
    right: 50px;
    padding: 10px;
    min-height: 40px;
    background: #fff;
    border-radius: 15px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="tel">
  <div class="speaker"></div>
  <div class="screen">
    <div class="nav"></div>
    <div contenteditable="true" class="edit"></div>
    <div class="voice">
      <i class="material-icons">keyboard_voice</i>
    </div>
  </div>
  <div class="touch"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    In WhatsApp, while "contenteditable" div increases, its wrapper (footer) also increases. Additionally, the area for the messages decreases (scrollbar height changes), by using { flex: 1 1 0 } – Kaya Toast Jun 24 '19 at 16:13
  • 1
    As this question has been marked as a duplicate (I can't answer here), I've provided my solution here https://stackoverflow.com/a/56747697/2619658 – Kaya Toast Jun 25 '19 at 06:23
  • The most simplest answer! – Rajesh May 06 '20 at 10:29