CODEWITHSUNDEEP
htmlcss
saman93
saman93

Reputation: 167

Break textarea text before it hits another element

I got a textarea and I want the text to break before it overlaps the emoji icon that is a button in my html file. I dont want it to overlap it. I would rather not give the emoji a z-index because it would mess other things up.

Here is code

HTML

<button class="emoji"></button>
<textarea rows="6" cols="60" class="divTxtArea" placeholder="Type a message.."></textarea>

CSS

.divTxtArea
{

    resize: none;
    font-family: "Open Sans";
    font-size: 1em;
    color:#8b959a;
    border-radius: 5px;
    border:1px solid #e1e4e6;
    width:580px;
    padding:15px 20px;
    height:180px;
    max-height:180px;
    overflow-y:scroll;
    outline: none; 
    resize:none!important;
}

div .emoji
{
    position:absolute;
    left:80%;
    margin-top:10px;
    display:inline-block;
}

And here is a picture for those who did not understand

enter image description here

Upvotes: 0

Views: 143

Answers (3)

NiZa
NiZa

Reputation: 3926

What about this? The pseudo-element before should be your emoji icon.

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 100px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

#textarea:before {
  content:'';
  height:40px;
  width:40px;
  float:right;
  background-color:red;
}
<div id="textarea" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt et sem eget imperdiet. Vivamus id sollicitudin urna. Proin nec libero ut justo egestas fringilla ut eu diam. Ut congue, felis in pulvinar lacinia, metus diam mollis dolor, et semper tortor purus vitae felis. Aenean lorem elit, ultricies dignissim dolor.</div>

Upvotes: 1

Ranish Karim
Ranish Karim

Reputation: 366

Try this

.divTxtArea
{

    resize: none;
    font-family: "Open Sans";
    font-size: 1em;
    color:#8b959a;
    border-radius: 5px;
    border:1px solid #e1e4e6;
    width:580px;
    padding:15px 20px;
    height:180px;
    max-height:180px;
    overflow-y:scroll;
    outline: none; 
    resize:none!important;
}

.divTxtArea .emoji
{
    float: right;
    margin-top:10px;
    display:inline-block;
}

.divTxtArea textarea {

  border: none;
  width : 95%;
  height: 100%;
  
}
<div class="divTxtArea">
  <button class="emoji"></button>
<textarea rows="6" cols="60" placeholder="Type a message.."></textarea>
  </div>

Upvotes: 3

Marin N.
Marin N.

Reputation: 366

Use 

textarea {
resize: none;
}

in your CSS.

Upvotes: 0

Related Questions