Fa Icon for html input

Question

I was creating a chat system and I was noticing the text overlapps my icon how can i prevent that from happening i want it to go to the next line before hitting the icon.

Thanks in advance.

.message_box {
  position: absolute;
  top: 93%;
  resize: none;
  left: 25%;
  width: 70%;
  padding-left: 20px;
  border-radius: 5px;
}
.fa-paper-plane-o {
  position: absolute;
  top: 95%;
  left: 92%;
}

<textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
    <i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i>

Pedram · Answer 1 · 2017-12-26T09:21:49.073

No make any sense that you used position: absolute, but anyway, you can do a trick, wrap your textarea and icon with a div then use float to make both element side by side.

.message_box {
    resize: none;
    border: none;
    width: 92%;
    outline: none;
    height: 100%;
    display: block;
    float: left;
}

#Wrapper {
    position: relative;
    width: 70%;
    border: 1px solid #bfbfbf;
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}

#Wrapper span {
    display: block;
    float: right;
    width: 7%;
    text-align: center;
    position: relative;
    top: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div id="Wrapper">
  <textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
  <span><i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i></span>
</div>

i think he used absolute positon to make the chat stay at the bottom of the page ... i think he want to build a kind of classic widget where chatting appear always on the bottom — Temani Afif, Dec 26 '17 at 09:03

score 0 · Answer 2 · answered Dec 26 '17 at 09:01

I suggest you to wrap everything inside a div that you make absolute and then manage the content inside it by using normal flow. You can then apply padding to both side of textarea and use negative margin on icon for the overlap:

.message {
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 0;
}

.message_box {
  resize: none;
  padding: 0 25px;
  width: 90%;
  border-radius: 5px;
  box-sizing: border-box;
}

.fa-paper-plane-o {
  position:absolute;
  margin-left: -30px;
  margin-top: 5px;
  vertical-align: top;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<div class="message">
  <textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
  <i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i>
</div>

Fa Icon for html input

2 Answers2